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>