tab 切换

 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>
春天的雨，夏天的风，只为更好的自己和最爱的你！