选项卡
<title>无标题文档</title> <style> #div1 .active{background:#FF0;} #div1 div{width:200px; height:200px; background:#666; border:1px solid #999; display:none;} </style> <script> 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++){ aBtn[i].index=i; aBtn[i].onclick=function (){ for(var i=0;i<aBtn.length;i++){ aBtn[i].className=''; aDiv[i].style.display='none'; } this.className='active'; aDiv[this.index].style.display='block'; }; } }; </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>3333</div> <div>4444</div> </div> </body>转载于:https://www.cnblogs.com/919czzl/p/4305699.html
