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>
时间： 2024-10-14 09:23:04