JS学习笔记 - 面向对象 - 选项卡 （普通选项卡改写）

选项卡3

<script>

window.onload=function ()

{

    new TabSwitch('div1');

};

function TabSwitch(id) // TabSwitch 是 id 的 对象？？

{

    // var oDiv=document.getElementById('div1');

    var oDiv=document.getElementById(id);

    this.aBtn=oDiv.getElementsByTagName('input'); // 变量 => 属性

    this.aDiv=oDiv.getElementsByTagName('div');

    //去除了全局变量 var aBtn = null; var aDiv = null;

    // 把aBtn / aDiv 变成了 TabSwitch函数的 属性。

    for(var i=0;i<this.aBtn.length;i++)

    {

        this.aBtn[i].index=i;

        this.aBtn[i].onclick = this.fnClick;

        // fnClick 写成 this.fnClick

        //（这里不再是函数了，是 TabSwitch的方法，所以要这样写）

    }

};

//function fnClick(){}; =>  TabSwitch.prototype.fnClick=function (){};

// 函数 => 方法

TabSwitch.prototype.fnClick=function ()

// 给TabSwitch 添加 fnClick 这个方法

{

    for(var i=0;i<this.aBtn.length;i++)   // aBtn.length => this.aBtn.length

    {

        this.aBtn[i].className=''

        this.aDiv[i].style.display='none';

    }

    oBtn.className='active';

    this.aDiv[oBtn.index].style.display='block';

}

</script>

选项卡2

<script>

var aBtn=null;  // 全局变量，window.onload 和 fnClick 都可以用

var aDiv=null;

window.onload=function ()

{

    var oDiv=document.getElementById('div1');

    aBtn=oDiv.getElementsByTagName('input');

    //这里获取变量的内容，能在下面fnClick函数里识别？？

    aDiv=oDiv.getElementsByTagName('div');

    for(var i=0;i<aBtn.length;i++)

    {

        aBtn[i].index=i;

        aBtn[i].onclick=fnClick;

    }

};

function fnClick()

{

    for(var i=0;i<aBtn.length;i++)

    {

        aBtn[i].className=''

        aDiv[i].style.display='none';

    }

    this.className='active';

    aDiv[this.index].style.display='block';

}

</script>