<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> .whole{ /*外面的大盒子可以不用设高，被里面上下的盒子撑出高*/ 500px; margin:100px auto; border:1px solid black; } .shang{ /*上面的盒子同样不用设高，被放着的按钮撑出高度*/ 100%; } .xia div{ /*下面盒子里面放着的5个盒子需要设定每个盒子高度是多少，下面的盒子的高度就是这5个盒子的高度总和*/ 100%; background-color: purple; height:100px; display:none; /*一开始这5个盒子都要隐藏，等点击相应的按钮的时候，才会显示*/ } .purple{ /*类名是紫色，背景颜色是紫色*/ background-color: purple; } .xia .show{ /*这5个盒子的类名是show的时候，盒子会显示， 注意一定写为.xia .show ,不能只写.show 因为一开始需要第一个盒子显示而其他的盒子隐藏,只写.show权重比.xia div低，所有盒子的状态不论鼠标点击与否都不会显示*/ display:block; } </style> <script> //js部分，点击tab栏中的第一个按钮，第一个按钮变成紫色，下方第一个盒子显示，其他盒子隐藏，点击第二个按钮，相应第二个按钮变成紫色，第二个盒子显示 window.onload=function() { var btns=document.getElementById("top").getElementsByTagName("button"); var divs=document.getElementById("bottom").getElementsByTagName("div"); for(var i=0;i<btns.length;i++) { btns[i].index=i; //难点，一开始获得所点击按钮的索引号，根据这个索引号找到对应的盒子让其显示 btns[i].onclick=function() { for(var j=0;j<btns.length;j++) { btns[j].className=""; //清空所有按钮的类名 } this.className="purple"; for(var j=0;j<divs.length;j++) { divs[j].className=""; //清空所有盒子的类名 } divs[this.index].className="show"; //和当前点击按钮索引号相同的盒子显示出来 } } }
js部分代码简化 window.onload=function()
{ var btns = document.getElementById("top").getElementsByTagName("button"); var divs = document.getElementById("bottom").getElementsByTagName("div"); for (var i = 0; i < btns.length; i++) { btns[i].index = i; btns[i].onclick = function () { for(var i=0;i<btns.length;i++) { btns[i].className=""; divs[i].className=""; } this.className="purple"; divs[this.index].className="show"; } } } </script> </head> <body> <!--一个大盒子，里面有上下两个盒子，上面的盒子里面有5个按钮，下面的盒子里又装着5个小盒子--> <div class="whole"> <div class="shang" id="top"> <button>第一个按钮</button> <button>第二个按钮</button> <button>第三个按钮</button> <button>第四个按钮</button> <button>第五个按钮</button> </div> <div class="xia" id="bottom"> <div class="show">第一个盒子</div> <div>第二个盒子</div> <div>第三个盒子</div> <div>第四个盒子</div> <div>第五个盒子</div> </div> </div> </body> </html>