js 实现tab选项卡

最近一直在研究js  如果不及时复习的话前边学到的东西很快就会忘掉，所以把前段时间的一个简单的tab选项卡的思路写出来也算复习了一下吧，

第一步：先把布局写出来；

<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">1111</div>
<div>2222</div>
<div>3333</div>
</div>

第二步：js实现

<script>
window.onload=function(){  //用window.onload  把代码放在了head里边   没有放在文档底部 哈哈 

/*获取到元素*/

var div=document.getElementById('div1');
var ainput=div.getElementsByTagName('input');
var li=div.getElementsByTagName('div');     

/*for 循环 获取按钮*/
for(var i=0;i<ainput.length;i++){
ainput[i].index=i;   //为元素添加一个索引
ainput[i].onclick=function(){
for(var i=0;i<ainput.length;i++){
ainput[i].className='';   //当点击后使元素class为空   下边再添加当前的class
li[i].style.display='none';
}
this.className='active';
li[this.index].style.display='block';  //使用索引  把 div和按钮连接起来
}
}
}
</script>

 

如果有其他好的思路的话 大家可以一块拿出来讨论  哈哈