选项卡，听上去看上去都不太高大上。实际上呢，确实不高大上。但这玩意又是网站开发中必备的一个元素，这要不会的话，一个好的网站就有些困难了。说白了，这个无非就是通过js让button和div之间发生关系，然后进行切换。
1.选项卡要实现的基本功能
（1）button与div产生关系，每个button对应不同的div
（2）所有button中只有一个能处于激活状态
（3）每次切换button只显示一个div
2.设计方案
（1）在一个div1中添加四个button和四个div，并添加简单样式
（2）给选项1添加类名，然后默认为激活状态，同时隐藏其余的div
（3）添加js代码，通过遍历改变button激活状态，和相应div的显示隐藏
3.简单实现代码（只谈论功能，不涉及美化）
<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>
时间： 2024-10-10 21:32:30