1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>tab</title> 6 7 <style> 8 #div1 .active{ 9 background: yellow; 10 } 11 #div1 div{ 12 200px; 13 height: 200px; 14 background: #ccc; 15 border: 1px solid #999; 16 display: none; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="div1"> 22 <input type="button" value="教育" class="active" /> 23 <input type="button" value="培训" /> 24 <input type="button" value="招生" /> 25 <input type="button" value="出国" /> 26 <div style="display: block;">1111</div> 27 <div>2222</div> 28 <div>3333</div> 29 <div>4444</div> 30 </div> 31 <script> 32 var div1 = document.getElementById('div1'); 33 var divs = div1.getElementsByTagName('div'); 34 var btns = div1.getElementsByTagName('input'); 35 36 for(var i = 0;i < btns.length;i ++){ 37 btns[i].index = i; 38 btns[i].onclick = function(){ 39 for(var i = 0;i < btns.length;i ++){ 40 btns[i].className = ''; 41 divs[i].style.display = 'none'; 42 } 43 this.className = 'active'; 44 divs[this.index].style.display = 'block'; 45 } 46 } 47 </script> 48 </body> 49 </html>
效果：