<!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. Linux终端中文显示乱码

    今天,帮我们同学处理一下中文显示乱码的问题.这个是个国内Linux用户烦恼的问题,由于大部分的Linux发行版都是以英语为主体的,而且英文在通用性和稳定性上都比中文要好一些,各种奇怪的BUG也要少一点 ...

  2. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-2.快速搭建SpringBoot项目，采用IDEA

    笔记 2.快速搭建SpringBoot项目,采用IDEA     简介:使用SpringBoot start在线生成项目基本框架并导入到IDEA中 参考资料:         IDEA使用文档    ...

  3. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-3.在线教育站点需求分析和架构设计

    笔记 3.在线教育站点需求分析和架构设计     简介:分析要开发的功能点和系统架构应该怎样架构 1.开发的功能:                     首页视频列表                ...

  4. RTSP协议-中文定义

    RTSP协议-中文定义 转自:http://blog.csdn.net/arau_sh/article/details/2982914 E-mail:bryanj@163.com 译者: Bryan. ...

  5. 部署k8s时容器中ping不通

    192.168.42.120 | UNREACHABLE! => {    "changed": false,     "msg": "Fail ...

  6. nodejs的事件循环1

    JavaScript的学习零散而庞杂,因此很多时候我们学到了一些东西,但是却没办法感受到自己的进步,甚至过了不久,就把学到的东西给忘了.为了解决自己的这个困扰,在学习的过程中,我一直试图在寻找一条核心 ...

  7. Java日志体系（二）log4j

    1.1 简介 Log4j是一个由Java编写可靠.灵活的日志框架,是Apache旗下的一个开源项目: 使用Log4j,我们更加方便的记录了日志信息,它不但能控制日志输出的目的地,也能控制日志输出的内容 ...

  8. centos7.5 解决缺少libstdc++.so.6库的原因及解决办法

    centos7. 解决缺少libstdc++.so.6库的原因及解决办法 执行node -v报错如下: [root@bogon ~]# node -v node: error : cannot ope ...

  9. 转 - JS 中 call 和 apply 以及 bind 的区别

    转自 https://blog.csdn.net/wyyandyou_6/article/details/81488103

  10. VMware中centos虚拟机的安装

    几个月前,就下载了VMware,centOS 6 操作系统镜像.苦于对linux的不理解和安装教程的不熟悉,一直未安装成功. 几天前,终于独自安装好了,特此记录一下. 安装其实很简单,之前失败是在于安 ...