面向对象-选项卡

普通函数改写为构造函数。

前提：

1.所有的东西都在onload里；

2.不能有函数嵌套，可以有全局变量；

改写过程：

普通函数 构造函数
onload(初始化整个程序) 构造函数（初始化一个对象）
全局对象 变为对象的属性
全局函数 变为对象的方法

 

 

 

 

 

<script type="text/javascript">
    window.onload = function () {
        var oTab = new TabSwitch("div2");
    }
    var aBtn = null;
    var aDiv = null;
    function TabSwitch(id){
        var div2 = document.getElementById(id);
        this.aBtn = div2.getElementsByTagName('input');//全局变量 转变成属性
        this.aDiv = document.getElementsByClassName('box');
        for(i=0;i<this.aBtn.length;i++){
            this.aBtn[i].index = i;
            this.aBtn[i].onclick = this.tab;//是当前对象的方法，所以给tab添加this

        }
    }
    TabSwitch.prototype.tab = function (){//函数 转变成对象的方法
        for(i=0;i<this.aBtn.length;i++){
            this.aBtn[i].className = '';
            this.aDiv[i].style.display = 'none';
        }
        this.aDiv[this.index].style.display = 'block';
        this.className = 'active';
    }
</script>

3. 解决this问题：

<script type="text/javascript">
    window.onload = function () {
        var oTab = new TabSwitch("div2");
    }
    var aBtn = null;
    var aDiv = null;
    function TabSwitch(id){
        var div2 = document.getElementById(id);
        this.aBtn = div2.getElementsByTagName('input');//全局变量 转变成属性
        this.aDiv = document.getElementsByClassName('box');
        var _this =this;//将这里的对象this存入_this中，方便在按钮点击里面用
        for(i=0;i<this.aBtn.length;i++){
            this.aBtn[i].index = i;
            this.aBtn[i].onclick = function () {
                _this.tab(this);//这里的this指的是按钮，把它作为参数传到函数中；
            }
        }
    }
    TabSwitch.prototype.tab = function (aBtn){//函数 转变成对象的方法
//        alert(this);  //input
//        alert(this);    //这里的this指的是对象object;
        for(i=0;i<this.aBtn.length;i++){
            this.aBtn[i].className = '';
            this.aDiv[i].style.display = 'none';
        }
        aBtn.className = 'active';
        this.aDiv[aBtn.index].style.display = 'block';
    }
</script>

最后：完整案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象-选项卡</title>
    <style>
        .box{display:none;}
    </style>
</head>
<body>
<div id="div2">
    <input class="active" type="button" value="王立娟">
    <input type="button" value="同学">
    <input type="button" value="几点上课">
</div>
<div class="box" style="display:block;">11</div>
<div class="box">22</div>
<div class="box">33</div>
</body>
</html>
<script type="text/javascript">
    window.onload = function () {
        var oTab = new TabSwitch("div2");
    }
    var aBtn = null;
    var aDiv = null;
    function TabSwitch(id){
        var div2 = document.getElementById(id);
        this.aBtn = div2.getElementsByTagName('input');//全局变量 转变成属性
        this.aDiv = document.getElementsByClassName('box');
        var _this =this;//将这里的对象this存入_this中，方便在按钮点击里面用
        for(i=0;i<this.aBtn.length;i++){
            this.aBtn[i].index = i;
            this.aBtn[i].onclick = function () {
                _this.tab(this);//这里的this指的是按钮，把它作为参数传到函数中；
            }
        }
    }
    TabSwitch.prototype.tab = function (aBtn){//函数 转变成对象的方法
//        alert(this);  //input
//        alert(this);    //这里的this指的是对象object;
        for(i=0;i<this.aBtn.length;i++){
            this.aBtn[i].className = '';
            this.aDiv[i].style.display = 'none';
        }
        aBtn.className = 'active';
        this.aDiv[aBtn.index].style.display = 'block';
    }
</script>

 

posted @ 2016-11-09 17:06  最爱小虾  阅读(1450)  评论(0)  编辑  收藏  举报