Tab切换效果

HTML

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Tab切换效果</title>
 6     <link rel="stylesheet" href="Tab切换.css">
 7 </head>
 8 <body>
 9     <ul id="tab_nav">
10         <li class="select">tab1</li>
11         <li>tab2</li>
12         <li>tab3</li>
13         <li>tab4</li>
14     </ul>
15     <div id="tab_con">
16         <div class="show">aaaa</div>
17         <div>bbbb</div>
18         <div>cccc</div>
19         <div>dddd</div>
20     </div>
21     <script src="Tab切换.js"></script>
22 </body>
23 </html>

Tab切换.css

 1 ul,li,div {
 2     padding: 0;
 3     margin: 0;
 4 }
 5 
 6 ul li {
 7     float: left;
 8     width: 200px;
 9     height: 30px;
10     line-height: 30px;
11     text-align: center;
12     background: #fff;
13     border: 1px #bbb solid;
14     border-bottom: none;
15 }
16 
17 ul li.select {
18     background: #ccc;
19     color: red;
20 }
21 
22 ul {
23     overflow: hidden;
24     zoom: 1;
25     list-style-type: none;
26 }
27 
28 #tab_con {
29     width: 806px;
30     height: 200px;
31 }
32 
33 #tab_con div {
34     width: 806px;
35     height: 400px;
36     display: none;
37     border: 1px #bbb solid;
38     border-top: none;
39 }
40 
41 #tab_con div.show {
42     display: block;
43     background: #ccc;
44 }

Tab切换.js

 1 var nav = document.getElementById("tab_nav");
 2 var lis = nav.getElementsByTagName("li");
 3 var divs = document.getElementById("tab_con").getElementsByTagName("div");
 4 for(var i = 0;i < lis.length;i++){
 5     lis[i].onclick = function(){
 6         for(var i = 0;i < lis.length;i++){
 7             if(this == lis[i]){
 8                 lis[i].className = "select";
 9                 divs[i].className = "show";                
10             }else{
11                 lis[i].className = "";
12                 divs[i].className = "";
13             }
14         }
15     }
16 }

效果图：

posted @ 2016-09-28 20:29  JSKevin  阅读(197)  评论(0)  编辑  收藏  举报