1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 8 *{ 9 padding:0; 10 margin:0; 11 } 12 .tab{ 13 300px; 14 height: 300px; 15 border:1px solid #333; 16 margin:50px auto; 17 } 18 .tab .hd{ 19 height:40px; 20 line-height: 39px; 21 text-align: center; 22 overflow: hidden; 23 } 24 .tab .hd span{ 25 float: left; 26 99px; 27 height:39px; 28 border-left:1px solid #333; 29 border-bottom:1px solid #333; 30 } 31 .tab .hd span:first-child{ 32 100px; 33 border-left: none; 34 } 35 .tab .hd span.cur{ 36 background-color: lightblue; 37 border-bottom: none; 38 font-weight: bold; 39 } 40 .tab .bd{ 41 overflow: hidden; 42 } 43 .tab .bd div{ 44 100%; 45 height: 260px; 46 display: none; 47 } 48 .tab .bd div.cur{ 49 display: block; 50 } 51 52 </style> 53 </head> 54 <body> 55 <div class="tab"> 56 <div class="hd" id="hd"> 57 <span class="cur">新闻</span> 58 <span>体育</span> 59 <span>时尚</span> 60 </div> 61 <div class="bd" id="bd"> 62 <div class="cur">新闻</div> 63 <div>体育</div> 64 <div>时尚</div> 65 </div> 66 </div> 67 68 69 <script type="text/javascript"> 70 // 获取元素 71 var spans = document.getElementById("hd").getElementsByTagName("span"); 72 var divs = document.getElementById("bd").getElementsByTagName("div"); 73 74 // 批量给span添加鼠标进入事件 75 for(var i = 0 ; i < spans.length ; i ++){ 76 // 将i保存在index属性中 77 spans[i].index = i; 78 79 spans[i].onmouseenter = function(){ 80 // 所有的span恢复原状 81 for(var j = 0 ; j < spans.length ; j ++){ 82 spans[j].className = ""; 83 } 84 // 特殊的那个span加cur。 85 this.className = "cur"; 86 87 // div对应和排他 88 // 所有div恢复原状 89 for(var k = 0 ; k < divs.length ; k ++){ 90 divs[k].className = ""; 91 } 92 // 对应的div加cur 93 divs[this.index].className = "cur"; 94 }; 95 } 96 97 98 99 100 101 102 103 104 105 106 </script> 107 </body> 108 </html>