<!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. springboot 静态资源访问，和文件上传 ，以及路径问题

    springboot 静态资源访问: 这是springboot 默认的静态资源访问路径  访问顺序依次从前到后(http://localhost:8080/bb.jpg) spring.resourc ...

  2. SQL-W3School-基础：SQL 教程

    ylbtech-SQL-W3School-基础:SQL 教程 1.返回顶部 1. SQL 是用于访问和处理数据库的标准的计算机语言. 在本教程中,您将学到如何使用 SQL 访问和处理数据系统中的数据, ...

  3. Rsa加密类

    需要导入Base64.jar包 import java.io.ByteArrayOutputStream; import java.security.Key; import java.security ...

  4. HelloWorld入门代码

    A:定义类 B:写main方法 C:写输出语句 D:Java程序开发运行与工作原理 E:编译和运行程序 class HelloWorld { public static void main(Strin ...

  5. C#WinForm程序显示控制台窗口Console

    启动一个WINFORM项目,使用一些API函数将控制台显示出来: AllocConsole 和 FreeConsole. 本程序只在DEBUG模式下显示控制台 [DllImport("ker ...

  6. java.lang.reflect.Method.getAnnotation()方法示例【通过反射获取到方法对象再获取方法对象上的注解信息】

    转: java.lang.reflect.Method.getAnnotation()方法示例 java.lang.reflect.Method.getAnnotation(Class <T&g ...

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

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

  8. c++ STL之unordered_map

    1.1 特性 关联性:通过key去检索value,而不是通过绝对地址(和顺序容器不同) 无序性:使用hash表存储,内部无序 Map : 每个值对应一个键值 键唯一性:不存在两个元素的键一样 动态内存 ...

  9. Django View视图

    视图view 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者 ...

  10. Introduction to statistical learning：with Applications in R （书，数据，R代码，链接）

    http://faculty.marshall.usc.edu/gareth-james/ http://faculty.marshall.usc.edu/gareth-james/ISL/