标签：javascript html 选项卡
选项卡，听上去看上去都不太高大上。实际上呢，确实不高大上。但这玩意又是网站开发中必备的一个元素，这要不会的话，一个好的网站就有些困难了。说白了，这个无非就是通过js让button和div之间发生关系，然后进行切换。
（1）button与div产生关系，每个button对应不同的div
（2）所有button中只有一个能处于激活状态
（3）每次切换button只显示一个div
（1）在一个div1中添加四个button和四个div，并添加简单样式
（2）给选项1添加类名，然后默认为激活状态，同时隐藏其余的div
（3）添加js代码，通过遍历改变button激活状态，和相应div的显示隐藏
<html>
<head>
<meta charset="utf-8">
<style>
#div1 .active{
background:blue;
}
#div1 div{
width:200px;
height:200px;
background:gray;
border:1px solid black;
display:none;
}
</style>
<script>
window.onload=function (){
var oDiv=document.getElementById('div1');
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
for(var i=0;i<aBtn.length;i++){ //遍历div1中的按钮
aBtn[i].index=i; //给aBth[]添加自定义属性
aBtn[i].onclick=function (){
for(var i=0;i<aBtn.length;i++){ //遍历按钮，将class清除
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
}
}
}
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="选项1" />
<input type="button" value="选项2" />
<input type="button" value="选项3" />
<input type="button" value="选项4" />
<div style="display:block;">111</div>
<div>222</div>
<div>333</div>
<div>444</div>
</div>
</body>
</html>
标签：javascript html 选项卡
原文地址：http://blog.csdn.net/wzqnls/article/details/40339783
