!DOCTYPE html>
loading
<br> .back{<br> background-color: yellowgreen;<br> }<br> .b{<br> display: block;<br> }<br> .box{<br> width: 300px;<br> margin: 100px auto;<br> border: 1px solid yellow;<br> }<br> #bottom div{<br> height: 270px;<br> background-color: blue;<br> border: 1px solid;<br> display: none;<br> }<br>
第一个
第二个
第三个
第四个
第五个
1
2
3
4
5
<br> var btns=document.getElementsByTagName("button");<br> var divs=document.getElementById("bottom").getElementsByTagName("div");<br> for(var i=0;i<btns.length;i++)<br> { btns[i].index=i;<br> btns[i].onclick=function () {<br> for(j=0;j<btns.length;j++){<br> btns[j].className="";<br> }<br> this.className="back";<br> for(var i=0;i<btns.length;i++){<br> divs[i].style.display="none";<br> }<br> divs[this.index].className="b";</p> <pre><code> } } </script> </code></pre> <p></body><br> </html></p> <pre><code> </code></pre>