码迷,mamicode.com
首页 > 其他好文 > 详细

选项卡

时间:2016-04-01 13:05:47      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:

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‘;
};

 

选项卡

标签:

原文地址:http://www.cnblogs.com/binlucky/p/5344495.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!