<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 .active {background:yellow;} #div1 div {width:200px; height:200px; background:#CCC; border:1px solid #999; display:none;} </style> <script> window.onload=function () { var oDiv=document.getElementById('div1'); //获取id为div1的元素 var aBtn=oDiv.getElementsByTagName('input'); var aDiv=oDiv.getElementsByTagName('div'); for(var i=0;i<aBtn.length;i++) { aBtn[i].index=i; //input元素的索引值设为i aBtn[i].onclick=function () { for(var i=0;i<aBtn.length;i++) //将所有input的样式清空 { aBtn[i].className=''; aDiv[i].style.display='none'; } this.className='active'; //将选择的元素添加class //alert(this.index); aDiv[this.index].style.display='block'; //将选择项相应的div元素显示出来 }; } }; </script> </head> <body> <div id="div1"> <input class="active" type="button" value="教育" /> <input type="button" value="培训" /> <input type="button" value="招生" /> <input type="button" value="出国" /> <div style="display:block;">1111</div> <div>2222</div> <div>333</div> <div>4444</div> </div> </body> </html>