重点是this指向问题 
<style>
        .hide{display: none;}
        #box div,#box1 div{display: none;}
        .hover{background: #fff666;}
    </style>
    <script>
//        window.onload = function () {
//            var aParent = document.getElementById('box');
//            var aInput = aParent.getElementsByTagName('input');
//            var aDiv = aParent.getElementsByTagName('div');
//            for(var i=0;i<aInput.length;i++){
//                //索引
//                aInput[i].index = i;
//
//                aInput[i].onclick = function () {
//                    //清除全部的样式
//                    for(var i=0;i<aInput.length;i++){
//                        aInput[i].className ='';
//                        aDiv[i].style.display = 'none';
//                    }
//                    this.className = 'hover';
//                    aDiv[this.index].style.display = 'block';
//                }
//            }
//        }
        //先变形
        //尽量不要出现函数嵌套函数
        //可以有全局变量
        //把onload中不是赋值语句放到单独的函数中
//        var aParent = null;
//        var aInput = null;
//        var aDiv = null;
//        window.onload = function () {
//            aParent = document.getElementById('box');
//            aInput = aParent.getElementsByTagName('input');
//            aDiv = aParent.getElementsByTagName('div');
//
//            init();
//        };
//        function init() {
//            for(var i=0;i<aInput.length;i++){
//                //索引
//                aInput[i].index = i;
//
//                aInput[i].onclick = onChange;
//            }
//        }
//
//        function onChange() {
//            //清除全部的样式
//            for(var i=0;i<aInput.length;i++){
//                aInput[i].className ='';
//                aDiv[i].style.display = 'none';
//            }
//            this.className = 'hover';
//            aDiv[this.index].style.display = 'block';
//        }

        //改成面向对象
        //全局变量就是属性
        //函数就是方法
        //onload中创建对象
        //改this指向问题: 事件或者定时器,尽量让面向对象中的this指向对象

        window.onload = function () {
            var t1 = new Tab('box');
            t1.init();
            t1.autoPlay();
            var t2 = new Tab('box1');
            t2.init();
            t2.autoPlay();
        };

        function Tab(id) {
            this.aParent = document.getElementById(id);
            this.aInput = this.aParent.getElementsByTagName('input');
            this.aDiv = this.aParent.getElementsByTagName('div');
            this.isNow = 0;
        }
        Tab.prototype.init = function () {
            //让this指向对象
            var This = this;
            for(var i=0;i<this.aInput.length;i++){
                //索引
                this.aInput[i].index = i;
                this.aInput[i].onclick = function(){
                    //this.onChange(); //1.当前的this是指向按钮的
                    This.onChange(this);//3.把按钮的this当参数传过去
                }
            }
        };
        Tab.prototype.onChange = function (btnThis) {
            //清除全部的样式
            for(var i=0;i<this.aInput.length;i++){
                this.aInput[i].className ='';
                this.aDiv[i].style.display = 'none';
            }
            btnThis.className = 'hover';
            this.aDiv[btnThis.index].style.display = 'block';
        };
        Tab.prototype.autoPlay = function () {
            var This = this;
            setInterval(function () {
                if (This.isNow == This.aInput.length-1){
                    This.isNow = 0;
                }else {
                    This.isNow ++;
                }
                for(var i=0;i<This.aInput.length;i++){
                    This.aInput[i].className ='';
                    This.aDiv[i].style.display = 'none';
                }
                This.aInput[This.isNow].className = 'hover';
                This.aDiv[This.isNow].style.display = 'block';

            },2000);
        };

    </script>
</head>
<body>
    <div id="box">
        <input class="hover" type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <div style="display: block">1111</div>
        <div>2222</div>
        <div>3333</div>
    </div>
    <div id="box1">
        <input class="hover" type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <div style="display: block">1111</div>
        <div>2222</div>
        <div>3333</div>
    </div>
</body>

js面向对象学习笔记（五）：tab切换的更多相关文章

  1. js面向对象学习笔记

    1.函数的定义方式 第一种定义方式 function fn1() { alert("fn1"); } alert(fn) 函数就是一个特殊的对象,是一个Function类的实例,其 ...

  2. js面向对象学习笔记（三）：原型

    //原型:改写对象下面公用的方法或者属性,让公用的方法或者属性在内存中只存在一份(提高性能)//原型:prototype :要写在构造函数的下面var arr =[1,2,3,4,5];var arr ...

  3. js面向对象学习笔记（四）：对象的混合写法

    //对象的混合写法//1.构造函数function 构造函数() { this.属性}构造函数.原型.方法 = function () {};//调用var 对象1 = new 构造函数();对象1. ...

  4. js面向对象学习笔记（二）：工厂方式:封装函数

    //工厂方式:封装函数function test(name) { var obj = new Object(); obj.name = name; obj.sayName = function () ...

  5. js面向对象学习笔记（一）：创建空对象，理解this指向

    var obj = new Object();//创建一个空对象 obj.name = '小王';//属性 obj.sayName = function () { //对象方法 对象最重要的是this ...

  6. js面向对象学习 - 对象概念及创建对象

    原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...

  7. 前端学习:JS(面向对象)代码笔记

    前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...

  8. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  9. Java IO学习笔记五：BIO到NIO

    作者:Grey 原文地址: Java IO学习笔记五:BIO到NIO 准备环境 准备一个CentOS7的Linux实例: 实例的IP: 192.168.205.138 我们这次实验的目的就是直观感受一 ...

随机推荐

  1. HTTP服务及状态码

    第一章 HTTP 1.1 HTTP协议的概念 HTTP协议,全称HyperText Transfer Protocol,中文名为超文本传输协议,是互联网上常用的通信协议之一,它有很多的应用.但是流行的 ...

  2. iOS 使用 CATransform3D 处理 3D 影像、制做互动立体旋转的效果

    1. Swift http://www.cocoachina.com/swift/20170518/19305.html domehttps://pan.baidu.com/s/1i4XXSkH OC ...

  3. 通过自动回复机器人学Mybatis 笔记：接口式编程

    [接口式编程]尚未遇见Spring --> 代码量反而增加 1.增加约定,减少犯错的可能(不用直接去写字符串 修改点1:命名空间 修改点2:增加接口,方法名与配置文件中的id对应 package ...

  4. ArcGIS API for JavaScript 4.2学习笔记[28] 可视域分析【使用Geoprocessor类】

    想知道可视域分析是什么,就得知道可视域是什么 我们站在某个地方,原地不动转一圈能看到的所有事物就叫可视域.当然平地就没什么所谓的可视域. 如果在山区呢?可视范围就会被山体挡住了.这个分析对军事上有十分 ...

  5. bzoj 3528: [Zjoi2014]星系调查

    Description 银河历59451年,在银河系有许许多多已被人类殖民的星系.如果想要在行 星系间往来,大家一般使用连接两个行星系的跳跃星门.  一个跳跃星门可以把 物质在它所连接的两个行星系中互 ...

  6. 工厂方法模式(Method Factory),理解多态应用的好例子.

    工厂方法模式又称为多态性工厂,个人认为多态性工厂更能准确的表达这个模式的用处.与简单工厂(静态工厂)相比较,这里的多态性是指抽象出一个工厂基类,将因为一个产品有N种不同的是现这种变化封装起来,将具体的 ...

  7. 【ASP.NET MVC系列】浅谈NuGet在VS中的运用

    一     概述 在我们讲解NuGet前,我们先来看看一个例子. 1.例子: 假设现在开发一套系统,其中前端框架我们选择Bootstrap,由于选择Bootstrap作为前端框架,因此,在项目中,我们 ...

  8. Webservice接口的调用

    一.开发webservice接口的方式 1.jdk开发. 2.使用第三方工具开发,如cxf.shiro等等. 我这边介绍jdk方式webservice接口调用. 二.使用jdk调用webservice ...

  9. Android 一排按钮居中显示

    将一排按钮放在LinearLayout中,设置LinearLayout的Android gravity属性为center_vertical(垂直居中)

  10. chrome console的使用 ： 异常和错误的处理 – Break易站

    本文内容来自:chrome console的使用 : 异常和错误的处理 – Break易站 利用 Chrome DevTools 提供的工具,您可以修复引发异常的网页和在 JavaScript 中调试 ...