最近一直在研究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>
如果有其他好的思路的话 大家可以一块拿出来讨论 哈哈