重点是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. 【python】for循环

    >>> exp='welcom to python'>>> for i in exp: print(i,end=' ') w e l c o m t o p y t ...

  2. TCP/IP的那些事--子网掩码

    当前互联网使用的主要是IPv4协议,它是第一个被广泛使用,构成现今互联网的基础的协议.但是,随着用户数量的增多,IPv4包含的IP资源在不断减少.或许你会想,不是还有IPv6吗?IPv6的容量足以应付 ...

  3. Mac和Xcode常用的快捷键

    Mac电脑一般都不怎么用鼠标,因此除了触摸屏的各种双指.三指甚至四指的操作之外,快捷键的使用可以带来非常大的便利,本文则主要收集整理了自己在Mac常规和Xcode开发过程中常用的一些快捷键. 一.Ma ...

  4. Bash shell命令记录和CentOS的一些技巧

    ①CentOS的实用技巧: 一.按下ctrl+alt+F2可由图形界面切换至命令行(shell窗口),按下ctrl+alt+F1可由命令行切换至图形界面(前提是安装CentOS时软件选择项选择安装了图 ...

  5. UVALive 4850 Installations

    题目大意:有若干个任务,每个任务耗时si,期限为di,同一时间只能做一个任务.对于一个任务,惩罚值为max(0,完成时间-期限).问怎么安排,使(最大惩罚值+次大惩罚值)最小,O(n^2). 如果没有 ...

  6. Eclipse Pydev添加MySQLdb模块,Windows下安装MySQL-python

    1.首先确保Windows下已经安装Python.Eclipse并且Eclipse已经集成Pydev能成功运行Python 2.下载MySQL-python 地址:http://www.codegoo ...

  7. MySql Schema 优化

    MySQL Schema 优化:   1.保证你的数据库的整洁性.   2.归档老数据 — 删除查询中检索或返回的多余的行   3.在数据上加上索引.   4.不要过度使用索引,评估你的查询.   5 ...

  8. python logging一个通用的使用模板

    import os import logbook from logbook.more import ColorizedStderrHandler from functools import wraps ...

  9. python爬取大众点评并写入mongodb数据库和redis数据库

    抓取大众点评首页左侧信息,如图: 我们要实现把中文名字都存到mongodb,而每个链接存入redis数据库. 因为将数据存到mongodb时每一个信息都会有一个对应的id,那样就方便我们存入redis ...

  10. 如何高逼格读取Web.config中的AppSettings

    http://edi.wang/post/2015/4/22/how-to-read-webconfig-appsettings-with-bigiblity 先插句题外话,下版本的ASP.NET貌似 ...