js Tab切换效果

 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>

 

你可能感兴趣的:(tab)