<!DOCTYPE html>
<html>
<head>
<style>
#div1 .dangqian {background-color:yellow;}
#div1 div {background-color:#a9a9a9;width:207px;height:207px;border:1px solid;
display:none;
}
</style>
<script>
window.onload=function(){
var divBox=document.getElementById('div1');
var button=divBox.getElementsByTagName('input');
var div=divBox.getElementsByTagName('div');
for(var i=0;i<button.length;i++){
button[i].index=i;
button[i].onclick=function(){
for(var i=0;i<button.length;i++){
button[i].className='';
div[i].style.display='none';
}
this.className="dangqian";
div[this.index].style.display='block';
}
}
}
</script>
</head>
<body>
<div id="div1">
<input class="dangqian" type="button" value="Aセット"/>
<input type="button" value="Bセット"/>
<input type="button" value="Cセット"/>
<div style="display:block">111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>javascript选项卡的实现
猜你喜欢
转载自blog.csdn.net/weixin_37370093/article/details/76186303
今日推荐
周排行