重点是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. 成功解决react+webpack打包文件过大的问题

    最近在学习并使用webpack+react+antd写了一个小项目,也可以说是demo,待全部开发完成后发现webpack的打包文件足足有将近13.3MB,快吓死宝宝了,经过连续几天的学习,和调试最后 ...

  2. xCode8以及iOS10 的新特性

    其他:ios10中 适配问题(1.系统判断方法失效:2.隐私数据的访问问题:3.UIColor 问题4.真彩色的显示5.ATS问题6.UIStatusBar问题7.UITextField8.UserN ...

  3. iOS框架搭建（MVC，自定义TabBar）--微博搭建为例

    项目搭建 1.新建一个微博的项目,去掉屏幕旋转 2.设置屏幕方向-->只有竖向 3.使用代码构建UI,不使用storyboard 4.配置图标AppIcon和LaunchImage 将微博资料的 ...

  4. bzoj 3192: [JLOI2013]删除物品

    Description   箱子再分配问题需要解决如下问题:  (1)一共有N个物品,堆成M堆.  (2)所有物品都是一样的,但是它们有不同的优先级.  (3)你只能够移动某堆中位于顶端的物品.  ( ...

  5. bzoj 3620: 似乎在梦中见过的样子

    Description "Madoka,不要相信 QB!"伴随着 Homura 的失望地喊叫,Madoka 与 QB 签订了契约. 这是 Modoka 的一个噩梦,也同时是上个轮回 ...

  6. JMeter参数化实现

     参数化:指对每次发起的请求,参数名称相同,参数值进行替换,如登录三次系统,每次用不同的用户名和密码. 1.1.1. 从csv文件读取(CSV Data Set Config) 步骤: 1)新建一个文 ...

  7. 关于 dos 下 npm 命令的使用

    npm install 可以安装模块,后面跟 -g 安装全局的,后面跟包的名字就是安装指定的包 npm uninstall <安装包的名字> 卸载某个包,后面跟 -g 是卸载全局的某个包 ...

  8. C语言中static关键字的用法

    C记得还是大一时学的,现在觉得好久没用了,又捧起来看看.今天刚看到有关static关键字,仔细地看了一遍<C和指针>这本书中的解释,现在觉得清楚多了. 首先,我们将static关键字,修饰 ...

  9. ADO.NET访问数据库

    1:ADO.NET数据库的方法和技术 2:ADO.NET的主要组成: 1>DataSet(数据集)-----独立于数据间的数据访问 2>.NETFramework(数据提供程序)----- ...

  10. DBCC命令

    DBCC SQLMGRSTATS 用于产生3个不同的值,这些值用在你想查看高速缓存在ad-hoc和预编译的TSQL语句中是如何工作的 Memory Used(8K Pages):若内存页的数量非常大, ...