选项卡

Posted 2020-07-02 淡淡草季

1. 普通选项卡

var aBtn=document.getElementsByTagName(‘input‘);
var aDiv=document.getElementsByTagName(‘div‘);
for(var i=0;i<aBtn.length;i++){
    aBtn[i].index=i;
    aBtn[i].onclick=function(){
        for(var i=0;i<aDiv.length;i++){
           aDiv[i].className=‘‘;
           aBtn[i].className=‘‘;
        }
        this.className=‘active‘;
        aDiv[this.index].className=‘on‘;
    };
}  

2.面向对象选项卡

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.fnClick(this);
        };
    }
};

TabSwitch.prototype.fnClick=function(oBtn){
    for(var i=0;i<this.aBtn.length;i++){
        this.aDiv[i].className=‘‘;
        this.aBtn[i].className=‘‘;
    }
    oBtn.className=‘active‘;
    this.aDiv[oBtn.index].className=‘on‘;
};