选项卡在各种网站网页上是随处可见的一种形式 今天就简单的讲解下 选项卡得制作方法
首先：思路；
我们做一个四个控制的选项卡 则应该有四个小的DIV 外边包裹着一个大的div 用四个input按钮来控制四个小的div
html部分：-------------------------------------------------------
<body>
<div id="div1">
<input type="button" value="教育" class="active"/>
<input type="button" value="培训"/>
<input type="button" value="招生"/>
<input type="button" value="出国"/>
<div style="display:block">11</div>
<div>22</div>
<div>33</div>
<div>44</div>
</div>
</body>
--------------------------------------------------------------------
因为网页刚刷新出来给予第一个按钮和第一个div样式
下面是CSS部分：
让其他的小的div先影藏起来 显示第一个 并且给予其基础样式
因为按钮的变化不是很大 所以给予一个激活状态的class样式
--------------------------------------------------------------------
<style>
#div1 .active{
background-color:yellow;
}
#div1 div{
width:200px;
height:300px;
background-color:red;
border:1px solid silver;
display:none;
}
</style>
-----------------------------------------------------------------
最后是JavaScript部分：
<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++){ //已循环的方式给予每个按钮事件
aBtn[i].onclick=function(){
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;//js添加序号
aBtn[i].className='';//先让全部为空
aDiv[i].style.display='none';//选项卡不显示
}
this.className='active';//添加class样式 当前按钮显示
aDiv[this.index].style.display='block'; 当前div显示
}
}
};
</script>
---------------------------------------------------------------