重点是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. 《修改代码的艺术》【PDF】下载

    <修改代码的艺术>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382309 内容简介 <修改代码的艺术>针对大型的. ...

  2. 【批处理】shift用法举例

    @echo off set sum=0 call :sub sum 1 2 3 4 echo sum=%sum% pause :sub set /a %1=%1+%2 shift /2 if not ...

  3. VM环境下Linux虚拟机扩展存储空间操作方法总结

    用VMwareware虚拟机安装的 Linux 系统剩余空间不足,造成软件无法正常安装.如果重新装一遍系统就需要重新配置好开发环境和软件的安装配置. 一.空间扩展  (1)打开VMware,选择Edi ...

  4. React Native绑定微信分享/登录/支付（演示+实现步骤+注意事项）

    React Native(以下简称RN)绑定微信分享/微信登录/微信支付的实现演示+源码+注意事项!微信的调用大同小异,本文实现了微信的分享功能,其他功能可以在链接文档里面找到具体的方法. 本文分文三 ...

  5. Git安装和使用（谨记）

    刚开始用git的小白适用,,转自http://www.cnblogs.com/qijunjun/p/7137207.html 实际项目开发中,我们经常会用一些版本控制器来托管自己的代码,今天就来总结下 ...

  6. bzoj 4817: [Sdoi2017]树点涂色

    Description Bob有一棵n个点的有根树,其中1号点是根节点.Bob在每个点上涂了颜色,并且每个点上的颜色不同.定义一条路 径的权值是:这条路径上的点(包括起点和终点)共有多少种不同的颜色. ...

  7. bzoj 3207: 花神的嘲讽计划Ⅰ

    Description 背景 花神是神,一大癖好就是嘲讽大J,举例如下: "哎你傻不傻的![hqz:大笨J]" "这道题又被J屎过了!!" "J这程序 ...

  8. Python学习(一)：编写购物车

    1.购物车流程图: 2.代码实现: #!/usr/bin/env python #coding=utf-8 ChoiceOne =''' 1.查看余额 2.购物 3.退出 ''' ChoiceTwo ...

  9. Anti-pattern/反模式

      常见的与"直觉"相背离的anti-pattern产生的实际原因是没有深入.全面地考虑问题,即只关注到自己关心的方面,忽略了其他重要的.起相反作用的因素. 所以这个"直 ...

  10. Visual studio code离线安装插件

    Visual studio code离线安装插件 公司研发区不能连接公网,使用Visual studio code(vsc)写Golang代码需要安装Go插件,下面介绍下,vsc离线安装插件的步骤.以 ...