JavaScript面向对象实例---tab选项卡

一。面向过程的tab选项卡

window.onload=function(){
    //获取父元素id
    var oDiv = document.getElementById('div1');

    //获取父元素下所有的btn
    var aInp  = oDiv.getElementsByTagName('input');

    //获取父元素下的div
    var aDiv = oDiv.getElementsByTagName('div');

    //遍历所有btn
    for (var i = 0; i < aInp.length; i++) {

        //记录当期元素的下标
        aInp[i].index = i;

        //btn的点击事件
        aInp[i].onclick=function(){

            //初始化所有的btn
            for (var i = 0; i < aInp.length; i++) {
                aInp[i].className='';
                aDiv[i].style.display='none';
            }

            //给当前btn加class
            this.className='active';

            //给当前div加blcok属性
            aDiv[this.index].style.display='block';

        }
    }
}
</script>

二。面向对象的tab选项卡

window.onload=function(){

    //实例化TabSwitch类
    var oTab = new TabSwitch('div1');
}

//TabSwitch类的构建
function TabSwitch(id){

    //获取父元素的id
     var oDiv = document.getElementById(id);

     //获取父元素下所有的btn
    this.aBtn  = oDiv.getElementsByTagName('input');

    //获取父元素下所有的div
    this.aDiv = oDiv.getElementsByTagName('div');

    //存储TabSwitch对象的this
    var _this = this;

    //遍历父元素下所有的btn
    for (var i = 0; i < this.aBtn.length; i++) {

        //保存当前btn元素的下标
        this.aBtn[i].index=i;

        //btn的点击事件
        this.aBtn[i].onclick=function(){

            //调用TabSwitch对象的原型方法tab，传递当前btn的this
            _this.tab(this);

        }
    }
}

//TabSwitch的tab方法

TabSwitch.prototype.tab=function(oBtn){

    //初始化所有的btn和div
    for (var i = 0; i < this.aBtn.length; i++) {
        this.aBtn[i].className='';
        this.aDiv[i].style.display='none';
    }

    //将当前btn的class设置为active
    oBtn.className='active';

    //给当前的div加block属性
    this.aDiv[oBtn.index].style.display='block';
}