js闭包做选项卡

.btns{

width:500px;

height:50px;

}

/*选项卡的样式*/

.btnsinput{

width:100px;

height:50px;

background-color:#ddd;/*默认灰色*/

color:#666;

border:0px;

}

/*被选中的选项卡的样式*/

.btnsinput.cur{

background-color:gold;

}

/*内容区的样式*/

.contentsdiv{

width:500px;

height:300px;

background-color:gold;

display:none;/*默认隐藏*/

line-height:300px;

text-align:center;

}

/*被选中的内容区的样式*/

.contentsdiv.active{

display:block;

}

//闭包做选项卡

window.onload=function(){

varaBtn=document.getElementById('btns').getElementsByTagName('input');

varaCon=document.getElementById('contents').getElementsByTagName('div');

//alert(aCon.length);

//循环所有的选项卡按钮

for(vari=0; i

(function(i){

//给每个选项卡按钮添加点击事件

aBtn[i].onclick=function(){

//遍历所有选项卡按钮

for(varj=0; j

//将每个选项卡按钮都设为灰色

aBtn[j].className='';

//将每个内容区都隐藏

aCon[j].className='';

}

//this代表当前点击的Button对象

this.className='cur';//当前点击的按钮为金色

//alert(i);//不加闭包时，不管点哪个按钮，i都等于3

//加闭包保存了索引值才有效

aCon[i].className='active';//当前点击的按钮对应的内容显示

}

})(i);

}

}

tab文字内容一

tab文字内容二

tab文字内容三