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 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 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 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>