1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>tab 切换</title> 5 </head> 6 <style type="text/css"> 7 #tab ul { 8 display: flex; 9 justify-content: space-between; 10 } 11 #tab li { 12 display: inline-block; 13 line-height: 30px; 14 width: 100px; 15 height: 30px; 16 text-align: center; 17 background: #ccc; 18 } 19 #tab li.cur { 20 color: #fff; 21 background: #000; 22 } 23 .con { 24 display: none; 25 } 26 #con div:first-child { 27 display: block; 28 } 29 </style> 30 <script type="text/javascript"> 31 window.onload = function() { 32 var tab = document.getElementById("tab").getElementsByTagName("li"); 33 var con = document.getElementById("con").getElementsByTagName("div"); 34 for (var i = 0; i < tab.length; i++) { 35 tab[i].index = i; 36 tab[i].onmouseover = function() { 37 for (var k = 0; k<con.length; k++) { 38 con[k].style.display = "none"; 39 tab[k].className = " "; 40 } 41 tab[this.index].className = "cur"; 42 con[this.index].style.display = "block"; 43 } 44 } 45 } 46 </script> 47 48 <body> 49 <div class="box"> 50 <!-- tab栏 --> 51 <div id="tab"> 52 <ul> 53 <li class="cur">TABONE</li> 54 <li>TABTWO</li> 55 <li>TABTRE</li> 56 <li>TABFOR</li> 57 </ul> 58 </div> 59 <!-- 内容部分 --> 60 <div id="con"> 61 <div class="con"> 62 <span>TABONE some text some text some text some text</span> 63 </div> 64 65 <div class="con"> 66 <span>TABTWO some text some text some text some text</span> 67 </div> 68 69 <div class="con"> 70 <span>TABTRE some text some text some text some text<span> 71 </div> 72 73 <div class="con"> 74 <span>TABFOR some text some text some text some text</span> 75 </div> 76 </div> 77 </div> 78 79 </body> 80 </html>