js Tab切换效果

浏览数：40 / 时间：2015年06月09日

 1 var tabs=function(){
 2     function tag(name,elem){
 3         return (elem||document).getElementsByTagName(name);
 4     }
 5     //获得相应ID的元素
 6     function id(id){
 7         return document.getElementById(id);
 8     }
 9     function first(elem){
10         elem=elem.firstChild;
11         return elem&&elem.nodeType==1? elem:next(elem);
12     }
13     function next(elem){
14         do{
15             elem=elem.nextSibling;  
16         }while(
17             elem&&elem.nodeType!=1  
18         )
19         return elem;
20     }
21     return {
22         set:function(elemId,tabId){
23             var elem=tag("li",id(elemId));
24             var tabs=tag("div",id(tabId));
25             var listNum=elem.length;
26             var tabNum=tabs.length;
27             for(var i=0;i<listNum;i++){
28                     elem[i].onclick=(function(i){
29                         return function(){
30                             for(var j=0;j<tabNum;j++){
31                                 if(i==j){
32                                     tabs[j].style.display="block";
33                                     //alert(elem[j].firstChild);
34                                     elem[j].firstChild.className="selected";
35                                 }
36                                 else{
37                                     tabs[j].style.display="none";
38                                     elem[j].firstChild.className="";
39                                 }
40                             }
41                         }
42                     })(i)
43             }
44         }
45     }
46 }();
47 tabs.set("nav","menu");//执行

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>网站首页</title>
  6 <style>
  7 * {
  8     margin: 0;
  9     padding: 0;
 10     border: 0;
 11 }
 12 .he {
 13     width: 700px;
 14     height: 200px;
 15     margin: 20px auto;
 16     border: 1px solid #E5E5E5;
 17     position: relative;
 18 }
 19 ul, ul li {
 20     list-style: none;
 21     float: left;
 22 }
 23 .top li {
 24     width: 160px;
 25     height: 40px;
 26     line-height: 40px;
 27     text-align: center;
 28     border-right: 1px solid #e6e6e6;
 29     border-bottom: 1px solid #e6e6e6;
 30     color: #777777;
 31     font-family: 微软雅黑;
 32     cursor:pointer;
 33 }
 34 .top li:hover{
 35     background-color:#fff;
 36     border-bottom:0;
 37     border-top:2px solid #F08F04;
 38 }
 39 .top:hover{
 40     border-bottom:0;
 41     
 42 }
 43 .top {
 44     width: 700px;
 45     height: 40px;
 46     background-color: #FCFCFC;
 47     border-bottom: 1px solid #e6e6e6;
 48 }
 49 span {
 50     color: #f60;
 51     position: absolute;
 52     right: 20px;
 53     margin-top: 15px;
 54     font-size: 13px;
 55 }
 56 
 57 </style>
 58 </head>
 59 <body>
 60 <div class="he">
 61   <ul class="top">
 62     <li>换乘查询</li>
 63     <li>线路查询</li>
 64     <li >站点查询</li>
 65   </ul>
 66   <span>切换城市</span> 
 67 <div id="menu">
 68         <div class="tag" style="display:block">
 69           aaaaaa
 70          </div> 
 71         <div class="tag" style="display:none">
 72             bbbbbb 
 73          </div> 
 74         <div class="tag"  style="display:none">
 75            ccccc
 76         </div> 
 77 </div>
 78 
 79 </div>
 80 </body>
 81 </html>
 82 <script>
 83 var tabs=function(){
 84     function tag(name,elem){
 85         return (elem||document).getElementsByTagName(name);
 86     }
 87     //获得相应ID的元素
 88     function id(id){
 89         return document.getElementById(id);
 90     }
 91     function first(elem){
 92         elem=elem.firstChild;
 93         return elem&&elem.nodeType==1? elem:next(elem);
 94     }
 95     function next(elem){
 96         do{
 97             elem=elem.nextSibling;  
 98         }while(
 99             elem&&elem.nodeType!=1  
100         )
101         return elem;
102     }
103     return {
104         set:function(elemId,tabId){
105             var elem=tag("li",id(elemId));
106             var tabs=tag("div",id(tabId));
107             var listNum=elem.length;
108             var tabNum=tabs.length;
109             for(var i=0;i<listNum;i++){
110                     elem[i].onclick=(function(i){
111                         return function(){
112                             for(var j=0;j<tabNum;j++){
113                                 if(i==j){
114                                     tabs[j].style.display="block";
115                                     //alert(elem[j].firstChild);
116                                     elem[j].firstChild.className="selected";
117                                 }
118                                 else{
119                                     tabs[j].style.display="none";
120                                     elem[j].firstChild.className="";
121                                 }
122                             }
123                         }
124                     })(i)
125             }
126         }
127     }
128 }();
129 tabs.set("nav","menu");//执行
130 </script>