<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>选项卡</title>

<style>

.active{

background-color: #789218;

color:aqua;

}

.box div{

height: 200px;

width: 200px;

border: 1px solid #cccccc;

display: none;

}

</style>

</head>

<body>

<script>

class Tab{

constructor(id){

this.oBox = document.getElementById(id);

this.aBtn = this.oBox.getElementsByTagName('input');

this.aDiv = this.oBox.getElementsByTagName('div');

this.iNow = 0;

this.init();

}

init(){

for(let i=0;i<this.aBtn.length;i++){

this.aBtn[i].onclick=()=>{

this.iNow = i;

document.title = this.iNow;

this.hide();

this.show(i);

}

}

}

hide(){

for(var i = 0; i < this.aDiv.length;i++){

this.aDiv[i].style.display = 'none';

this.aBtn[i].className = '';

}

}

show(index){

this.aDiv[index].style.display = 'block';

this.aBtn[index].className = 'active';

}

}

class AuToTab extends Tab{

constructor(id){

super(id);

setInterval(this.next.bind(this),1000)

}

next(){

this.iNow++;

if(this.iNow == this.aBtn.length)this.iNow=0;

this.hide();

this.show(this.iNow);

}

}

window.onload=()=>{

new Tab('box');

new AuToTab('box2');

}

</script>

<div id="box" class="box">

<input type="button" value="aaa" class="active">

<input type="button" value="bbb">

<input type="button" value="ccc">

<div style="display: block;">1111</div>

<div>2222</div>

<div>3333</div>

</div>

<div id="box2" class="box">

<input type="button" value="aaa" class="active">

<input type="button" value="bbb">

<input type="button" value="ccc">

<div style="display: block;">1111</div>

<div>2222</div>

<div>3333</div>

</div>

</body>

</html>

ES6 class 继承 与面向对象封装开发简单实例的更多相关文章

  1. HTML5面向对象的游戏开发简单实例总结

    在阅读一本HTML5游戏开发相关书籍时发现一个很好的例子,通过这个例子可以对面向对象的开发进行更深入的理解.这个对象要实现的是:将一个CSS sprite中的图像绘制到canvas中.首先创建一个Sp ...

  2. SpringMVC笔记——Spring+MyBatis组合开发简单实例

    简介 SSH框架很强大,适合大型项目开发.但学无止境,多学会一门框架组合开发会让自己增值许多. SSM框架小巧精致,适合中小型项目快速开发,对于新手来说也是简单上手的.在SSM框架搭建之前,我们先学习 ...

  3. Java WebService 开发简单实例

    Web Service 是一种新的web应用程序分支,他们是自包含.自描述.模块化的应用,可以发布.定位.通过web调用.Web Service可以执行从简单的请求到复杂商务处理的任何功能.一旦部署以 ...

  4. js封装、简单实例源码记录

    1.运动封装:doMove ( obj, attr, dir, target, endFn )  加入回调.&&.||用法注释 <script> var oBtn1 = d ...

  5. 安卓APP开发简单实例 结对编程心得

    开始说起搞APP开发,自己和小伙伴的编程水平真的很低,无从下手,只有在网上找点案列,学习着怎样开发,结对编程还是面临着许多问题的,大家的水平有所差异和编程风格不同,我们用eclipse做了一个仿微信登 ...

  6. SpringMVC笔记——SSM框架搭建简单实例

    落叶枫桥 博客园 首页 新随笔 联系 订阅 管理 SpringMVC笔记——SSM框架搭建简单实例 简介 Spring+SpringMVC+MyBatis框架(SSM)是比较热门的中小型企业级项目开发 ...

  7. 九、Java基础---------面向对象封装、继承、多态

    封装 1.1 基本概念  封装(encapsulation)是面向对象三大特征之一,它是指将对象的状态信心隐藏在对象的内部,不允许外部直接进行访问,而是通过该类提供的方法来实现对内部信息的操作和访问. ...

  8. 网络游戏开发-服务器（01）Asp.Net Core中的websocket，并封装一个简单的中间件

    先拉开MSDN的文档,大致读一遍 (https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/websockets) WebSocket 是一 ...

  9. php面向对象 封装继承多态 接口、重载、抽象类、最终类总结

    1.面向对象 封装继承多态  接口.重载.抽象类.最终类 面向对象 封装继承多态  首先,在解释面向对象之前先解释下什么是面向对象? [面向对象]1.什么是类? 具有相同属性(特征)和方法(行为)的一 ...

随机推荐

  1. oc 执行shell 脚本

    -(id) InvokingShellScriptAtPath :(NSString*) shellScriptPath { NSTask *shellTask = [[NSTask alloc]in ...

  2. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_6-1.常用的第三方支付和聚合支付介绍

    笔记 第六章 开发在线教育视频站点核心业务之从零基础接入 微信扫一扫网页支付 1.常用的第三方支付和聚合支付介绍     简介:介绍常用的第三方支付和聚合支付 1.什么是第三方支付         第 ...

  3. ceph报错

    [ceph_deploy.mon][ERROR ] RuntimeError: config file /etc/ceph/ceph.conf exists with different conten ...

  4. jack反序列化自定义字段绑定，报错：can only instantiate non-static inner class by using default, no-argument constructor

    package com.xxx; import com.fasterxml.jackson.annotation.JsonProperty; import lombok.Data; import lo ...

  5. UIView和UIWindow的使用

    1.创建窗口: func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [N ...

  6. 20190722 - Windows 下使用 move 命令和通配符移动多个文件

    这是个标题党,实际上 move 命令无法移动通配符匹配的多个文件 比如,我有四个文件: c:\a\a1.txt c:\a\a2.txt c:\a\b1.txt c:\a\b2.txt 想移动后两个文件 ...

  7. Git提交本地项目文件到GitHub的详细操作

    因最近在使用git命令提交代码到github的操作,网上找了下教程,记录下过程,便于查看 添加整个文件夹及内容 git add 文件夹/ 添加目录中所有某种类型的文件 git add *.文件类型 `

  8. SpringBoot中使用aop-测试

    面向切面编程(AOP),该种方式主要是为了弥补面向对象编程(OOP)的不足,通过配置切面以及关注点.通知等我们可以在程序的任意位置对我们的代码进行增强(执行一些代码),AOP是Spring的特性之一, ...

  9. [转帖]开源的监控技术栈除了ELK，还有InfluxData的TICK

    开源的监控技术栈除了ELK,还有InfluxData的TICK   https://cloud.tencent.com/developer/news/357119 来源 | Influxdata 译者 ...

  10. Spring MVCD框架中调用HanLP分词的方法

    项目简要:关于java web的一个项目,用的Spring MVCd 框架.鉴于参与此次项目的人中并不是所人都做的Spring,为了能够提高效率,建议大家是先抛开SPring来写自己负责的模块,最后再 ...