经典选项卡问题

来源：互联网发布：靠谱的美国代购淘宝店编辑：程序博客网时间：2024/06/12 18:56

<!DOCTYPE html>

input{

width: 65px;
height: 22px;
margin-left:-5px;
margin-bottom:1px ;

}
div{

width: 254px;
height: 160px;
border: 1px solid #999;
background-color:lightblue;
margin-left:-3px ;
display: none;

}
.active{

display:block;

}
.ac{

background-color:deeppink;

}

</style>
<script type="text/javascript">

window.onload=function(){

var aBtn=document.getElementsByTagName("input");
var aDiv=document.getElementsByTagName("div");
for(var i=0;i<aBtn.length;i++){

aBtn[i].index=i;
aBtn[i].onclick=function(){

for(var i=0;i<aBtn.length;i++){

aBtn[i].className="";
aDiv[i].style.display="none";

}
this.className="ac";
aDiv[this.index].style.display="block";

}

</script>
</head>
<body>

<input type="button" name="" id="jiaoyu" value="教育" class="ac" />
<input type="button" name="" id="chuguo" value="出国" />
<input type="button" name="" id="peixun" value="培训" />
<input type="button" name="" id="kaoshi" value="考试" />
<div class="active" >

教育

</div>
<div>

出国

</div>
<div>

培训

</div>
<div>

考试

</div>

</body>
</html>

0 0