TAB切换demo

 1         <style type="text/css">
 2             *{
 3                 margin:0;
 4                 padding:0;
 5                 font-size:16px;
 6                 font-family:微软雅黑;
 7 
 8             }
 9 
10             .tab{
11                 margin-top:20px;
12             }
13 
14             /*ul*/
15             .tab-ulcss{
16                 display:block;    
17                 list-style:none;
18                 margin:0 auto;
19                 width:500px;
20                 heigth:30px;
21                 clear:both;
22 
23             }
24             .tab-ulcss li{
25                 display:block;
26                 text-align:center;
27                 float:left;    
28                 margin-right:-9px;
29                 border-radius:8px 8px 0 0;    
30                 
31             }
32 
33             .tab-li{            
34                 margin-top:7px;
35                 height:30px;
36                 width:100px;
37                 border:solid 1px #009900;
38                 background-color:#fff;
39             }
40             .tab-li-on{
41                 margin-top:0px;
42                 height:38px;
43                 width:120px;
44                 font-size:18px;
45                 border:solid 1px #009900;
46                 border-bottom:none;
47                 background-color:#33CC66;
48             }
49             /*div*/
50             .tab-divcss{
51                 margin:0 auto;
52                 width:500px;
53                 height:200px;
54                 clear:both;
55             }
56             .tab-page{
57                 display:none;
58             }
59             .tab-page-on{
60                 z-index:-1;
61                 margin-top:-2px;
62                 border-radius:0px 8px 8px 0;    
63                 text-align:center;
64                 display:block;
65                 position:absolute;
66                 width:500px;
67                 height:200px;
68                 border:solid 1px #009900;
69                 background-color:#33CC66;
70             }
71         </style>

 1 <div class="tab">
 2             <ul id="tab-ul" class="tab-ulcss">
 3                 <li class="tab-li-on">tab1</li>
 4                 <li class="tab-li">tab2</li>
 5                 <li class="tab-li">tab3</li>
 6             </ul>
 7             <div id="tab-div" class="tab-divcss">
 8                 <div class="tab-page-on">
 9                     one
10                 </div>
11                 <div class="tab-page">
12                     two
13                 </div>
14                 <div class="tab-page">
15                     three
16                 </div>
17             </div>
18         </div>

 1 <script type="text/javascript">
 2             var tabli =document.getElementById("tab-ul").getElementsByTagName("li");    //获取菜单项数组
 3             var tabdiv=document.getElementById("tab-div").getElementsByTagName("div");  //获取3个菜单对应的页面      
 4             for (var i=0;i<tabli.length;i++)
 5             {
 6                 tabli[i].onclick=function(){turnpage(this)}                 //对每个菜单项添加onclick事件
 7             }
 8             function turnpage(obj)                            //当菜单点击时，对每个菜单更改样式
 9             {
10                 for(var i=0;i<tabli.length;i++)
11                 {
12                     if (tabli[i]==obj){
13                         tabli[i].className="tab-li-on";
14                         tabdiv[i].className="tab-page-on";
15                     }else{
16                         tabli[i].className="tab-li";
17                         tabdiv[i].className="tab-page";
18                     }
19                 }    
20             }
21 
22         </script>

posted on 2015-07-17 09:47 Yesphet 阅读(250) 评论(0) 编辑收藏举报