html部分 css部分 js部分 ...
html部分
<div class="box"> <div class="top"> <button>第一個</button> <button>第二個</button> <button>第三個</button> <button>第四個</button> <button>第五個</button> </div> <div class="bottom" id="divs"> <div class="show">1好盒子</div> <div>2好盒子</div> <div>3好盒子</div> <div>4好盒子</div> <div>5好盒子</div> </div> </div>
css部分
<style> .box { width: 400px; margin:100px auto; border:1px solid #ccc; } .bottom div{ width:100%; height: 300px; background-color: pink; display: none; } .purple { background-color: purple; } .bottom .show { display: block; } </style>
js部分
<script> window.onload = function(){ var btns = document.getElementsByTagName("button"); var divs = document.getElementById("divs").getElementsByTagName("div"); for(var i= 0;i<btns.length;i++) { btns[i].index = i; // 難點tns[i].index = i; // 難點 btns[i].onclick = function(){ //讓所有的 btn 類名清空 //alert(this.index); for(var j=0;j<btns.length;j++) { btns[j].className = ""; divs[j].className = ""; } // 當前的那個按鈕 的添加 類名 this.className = "purple"; //先隱藏下麵所有的 div盒子 //留下中意的那個 跟點擊的序號有關係的 divs[this.index].className = "show"; } } } </script>