<!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. 1.2 Go语言基础之变量和常量

    变量和常量是编程中必不可少的部分,也是很好理解的一部分. 一.标识符与关键字 1.1 标识符 在编程语言中标识符就是程序员定义的具有特殊意义的词,比如变量名.常量名.函数名等等. Go语言中标识符由字 ...

  2. oc 执行shell 脚本

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

  3. LINUX 的网站压力测试工具 webbench

    网站压力测试工具-Webbench webbench简介:        Webbench是有名的网站压力测试工具,它是由 Lionbridge公司(http://www.lionbridge.com ...

  4. 用python实现简单EXCEL数据统计的实例

    用python实现简单EXCEL数据统计的实例 下面小编就为大家带来一篇用python实现简单EXCEL数据统计的实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 任 ...

  5. 直连路由onlink

    根据路由器学习路由信息.生成并维护路由表的方法包括直连路由(Direct).静态路由(Static)和动态路由(Dynamic).直连路由:路由器接口所连接的子网的路由方式称为直连路由:非直连路由:通 ...

  6. 实战keras——用CNN实现cifar10图像分类

    原文:https://blog.csdn.net/zzulp/article/details/76358694 import keras from keras.datasets import cifa ...

  7. React Hook 学习

    1.官方文档 https://react.docschina.org/docs/hooks-intro.html 2.阮一峰 reactHook http://www.ruanyifeng.com/b ...

  8. Mysql事件调度器学习

    在cassandra数据库中,有一个叫做TTL的功能,即插入一条记录时,可以指定某一字段对应的TTL值,比如30s,那么当TTL到达30s后该条记录就会被自动删除.目前MySQL并未直接提供TTL的功 ...

  9. 浅析C语言中printf(),sprintf(),scanf(),sscanf()的用法和区别

    printf语法: #include <stdio.h>int printf( const char *format, ... ); printf()函数根据format(格式)给出的格式 ...

  10. pycharm 安装好,只要三部! 超级简单教程!

    pycharm的安装,确实比较麻烦,所以特意做了一期简单版本的安装教程,跟着教程走...只要三部! →下载 链接:https://pan.baidu.com/s/1JxZgAhPVKAIoM1_jpD ...