<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> #div1 .active { background: yellow; } #div1 div { 200px; height: 200px; background: #808080; border: 1px solid #f00; display: none; } </style> <script type="text/javascript"> window.onload = function () { var oDiv = document.getElementById("div1"); var aBtn = oDiv.getElementsByTagName("input"); var aDiv = oDiv.getElementsByTagName("div"); for (var i = 0; i < aBtn.length; i++) { //给每一个按钮增加一个Index属性 aBtn[i].index = i; //给按钮增加事件 aBtn[i].onclick = function () { //先把所有的btn的class改成无 for (var j = 0; j < aBtn.length; j++) { aBtn[j].className = ''; aDiv[i].style.display = 'none'; } //当前点击的按钮是this this.className = "active"; alert(this.index); //aDiv[this.index].style.display = 'block'; } } } </script> </head> <body> <div id="div1"> <input type="button" class="active" value="教育" /> <input type="button" value="培训" /> <input type="button" value="招生" /> <input type="button" value="出国" /> <div style="display: block">11111111</div> <div>22222222</div> <div>33333333</div> <div>44444444</div> </div> </body> </html>