重点是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. 在Eclipse中创建Django项目

    在以前的分享中,我们是在命令行模式下创建Django项目的,那么,如何在IDE中使用Django呢? 本文将介绍如何在Eclipse中创建Django项目. 首先,新建Django项目mysite,如 ...

  2. git入门（msysgit安装）

    1.下载git-for-windows 常用的GitHub客户端msysgit,也就是git-for-windows. 登录官网 https://git-for-windows.github.io/, ...

  3. HHVM源码剖析

    一.前言 hhvm源码中充满了很多C++11的新特性,并且使用了各种设计模式如工厂,模板方法等,利用智能指针包裹指针,让delete没有肆意的出现 模板,继承,explicit,纯虚函数的出现令代码中 ...

  4. Linux(CentOS6.5)下编译安装Nginx官方最新稳定版(nginx-1.10.0)

    注:此文已经更新为新版:http://comexchan.cnblogs.com/p/5815753.html ,请直接查看新版,谢谢! 本文地址http://comexchan.cnblogs.co ...

  5. ab返回结果参数分析

    Server Software    返回的第一次成功的服务器响应的HTTP头.Server Hostname    命令行中给出的域名或IP地址Server Port    命令行中给出端口.如果没 ...

  6. Xampp配置本地域名及常见错误解决

    本地域名配置 1.计算机-->C盘-->Windows-->System32-->drivers-->etc-->hosts 127.0.0.1       loc ...

  7. 保存html上传文件过程中遇到的字节流和字符流问题总结

    java字节流和字符流的区别以及相同 1. 字节流文件本身进行操作,字符流是通过缓存进行操作, 1.1 使用字节流不执行关闭操作 File f =new File("d:/test/test ...

  8. Java中使用LocalDate根据日期来计算年龄

    Java中和日期直接相关的类有很多,平时最常用到的就是java.util package下面的Date和Calendar,需要用到格式的时候还会用到java.text.SimpleDateFormat ...

  9. Windows 7样式地址栏（Address Bar）控件实现

    介绍 从Vista开始,地址栏就有了很大的改变,不知道大家有什么感觉,笔者觉得很方便,同时又兼容之前的功能,是个很不错的创新.不过,微软并不打算把这一很酷的功能提供给广大的开发人员. 本文提供了一个简 ...

  10. Jenkins 学习笔记（三）：我们的JAVA 项目是这么发布的

    发布拓扑 1. 拓扑图 2. 流程说明: Git 插件从 Git Server 上面拉取源代码. Maven 插件将源代码安装我们设定的指令进行编译打包,存放于项目的 WorkSpace. Publi ...