<style type="text/css">
.box {
width: 400px;
border: 1px solid #ccc;
margin: 100px auto;
}
.bottom div {
width: 400px;
height: 300px;
background: pink;
display: none;
}
.bottom .active {
display: block;
}
.none {
display: none;
}
.purple {
background: purple;
}
</style>
<body>
<div class="box">
<div class="top">
<button>第一个</button>
<button>第二个</button>
<button>第三个</button>
<button>第四个</button>
<button>第五个</button>
</div>
<div class="bottom" id="bottom">
<div class="active">1盒子</div>
<div>2盒子</div>
<div>3盒子</div>
<div>4盒子</div>
<div>5盒子</div>
</div>
</div>
</body>
<script type="text/javascript">
var btns = document.getElementsByTagName("button");
var bottom = document.getElementById("bottom");
var divs = bottom.getElementsByTagName("div");
//alert(btns.length);
for(var i=0; i<btns.length; i++) {
btns[i].index = i;//给每个按钮添加一个属性
//alert(btns[i].index);
btns[i].onclick = function() {
//alert(this.index);
//1 清除所有的button类名
for(var j=0; j<btns.length; j++) {
btns[j].className = "";
}
//2 设置当前的按钮的背景色样式
this.className = "purple";
//3 让当前的按钮对应的div显示,其他的隐藏
/*
*/
for(var k=0; k<divs.length; k++) {
divs[k].className = "none";
}
divs[this.index].className = "active";
}
}
</script>
4058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
