原生js选项卡

  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>
View Code