<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <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> <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; // 难点, btns[i].onclick = function(){ //让所有的 btn 类名清空,给每个button 定义了一个index属性 索引号 index自己定的 for(var j=0;j<btns.length;j++) //清除所有的 类名 只能用 for 遍历 { btns[j].className = ""; divs[j].className = ""; } // 当前的那个按钮 的添加 类名 this.className = "purple"; //先隐藏下面所有的 div盒子 //留下中意的那个 跟点击的序号有关系的 divs[this.index].className = "show"; } } } </script></head><body><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></body></html>
转载于:https://www.cnblogs.com/yiwangdeyidianyuan/p/5758099.html
相关资源：数据结构—成绩单生成器