面向对象选项卡原理

/*
//面向过程
window.onload = function(){
    var oDiv = document.getElementById('div1');
    var aBtn = oDiv.getElementsByTagName('input');
    var aDiv = oDiv.getElementsByTagName('div');

    for(var i=0; i<aBtn.length; i++){
        aBtn[i].index = i;
        aBtn[i].onclick = function(){
            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';
        }
    };
};
*/
/********************************
改写步骤:   window.onload 初始化整个程序        构造函数 初始化整个对象
            变量 函数                            属性 方法
         1、原则：不能有全套函数，但可以有全局变量（尽量没有）
         2、过程：onload    改  构造函数
                   全局变量  改  属性
                  函数      改  方法
         3、改错：this、事件、闭包、传参
*********************************/

// 面向对象
window.onload = function(){
    new TabSwitch('div1');
}

function TabSwitch(id){
    var _this = this;
    var oDiv = document.getElementById(id);
    this.aBtn = oDiv.getElementsByTagName('input');
    this.aDiv = oDiv.getElementsByTagName('div');

    for(var i=0; i<this.aBtn.length; i++){
        this.aBtn[i].index = i;
        this.aBtn[i].onclick = function(){        //通过闭包传递this
            _this.fnClick(this);
        }
    };
};

TabSwitch.prototype.fnClick = function(oBtn){
    for(var i=0; i<this.aBtn.length; i++){
        this.aBtn[i].className = '';
        this.aDiv[i].style.display = 'none';
    }
    oBtn.className = 'active';
    this.aDiv[oBtn.index].style.display = 'block';
}