写了个切换效果
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta charset="gbk">
5 <title>切换</title>
6 </head>
7 <style>
8 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{padding:0; margin:0}
9 body{font:12px/22px Tahoma, "宋体"; word-break:break-all; color:#383838; background:#FFF; padding-bottom:15px}
10 fieldset, img{border:0}
11 table{border-collapse:collapse; border-spacing:0;}
12 ol, li, ul{list-style:none}
13 #btn{text-align:center}
14 li{height:40px; line-height:40px; overflow:hidden; background:#099; text-align:center; color:#FFF; width:400px}
15 li .cur{ color:#900; font-size:14px}
16 .tList{display:none}
17 </style>
18 <body>
19 <ul id="news_tit">
20 <li><a href="#">最新</a></li>
21 <li><a href="#">新闻</a></li>
22 <li><a href="#">公告</a></li>
23 </ul>
24 <div id="news_bd">
25 <ul class="tList">
26 <li><a href="#" title="" target="_blank">111111111</a></li>
27 </ul>
28 <ul class="tList">
29 <li><a href="#" title="" target="_blank">2222222</a></li>
30 </ul>
31 <ul class="tList">
32 <li><a href="#" title="" target="_blank">333333333</a></li>
33 </ul>
34 </div>
35 <script>
36
37 var $ = new Function('obj','return document.getElementById(obj);');
38 var tit = $('news_tit'),bd = $('news_bd'),iLink = tit.getElementsByTagName('a'),iBd = bd.getElementsByTagName('ul');
39
40 var flag = 0
41
42 for(var i=0;i<iLink.length;i++){
43
44 iLink[i].sss = i;
45
46 iLink[flag].className = 'cur';
47
48 iBd[flag].style.display = 'block';
49
50 iLink[i].onclick = function(){change(this.sss)}
51
52 }
53
54 function change(v){
55
56 iLink[flag].className = '';
57
58 iBd[flag].style.display = 'none';
59
60 flag = v;
61
62 iLink[flag].className = 'cur';
63
64 iBd[flag].style.display ='block';
65
66 }
67
68 </script>
69
70 </body>
71 </html>
2 <html>
3 <head>
4 <meta charset="gbk">
5 <title>切换</title>
6 </head>
7 <style>
8 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{padding:0; margin:0}
9 body{font:12px/22px Tahoma, "宋体"; word-break:break-all; color:#383838; background:#FFF; padding-bottom:15px}
10 fieldset, img{border:0}
11 table{border-collapse:collapse; border-spacing:0;}
12 ol, li, ul{list-style:none}
13 #btn{text-align:center}
14 li{height:40px; line-height:40px; overflow:hidden; background:#099; text-align:center; color:#FFF; width:400px}
15 li .cur{ color:#900; font-size:14px}
16 .tList{display:none}
17 </style>
18 <body>
19 <ul id="news_tit">
20 <li><a href="#">最新</a></li>
21 <li><a href="#">新闻</a></li>
22 <li><a href="#">公告</a></li>
23 </ul>
24 <div id="news_bd">
25 <ul class="tList">
26 <li><a href="#" title="" target="_blank">111111111</a></li>
27 </ul>
28 <ul class="tList">
29 <li><a href="#" title="" target="_blank">2222222</a></li>
30 </ul>
31 <ul class="tList">
32 <li><a href="#" title="" target="_blank">333333333</a></li>
33 </ul>
34 </div>
35 <script>
36
37 var $ = new Function('obj','return document.getElementById(obj);');
38 var tit = $('news_tit'),bd = $('news_bd'),iLink = tit.getElementsByTagName('a'),iBd = bd.getElementsByTagName('ul');
39
40 var flag = 0
41
42 for(var i=0;i<iLink.length;i++){
43
44 iLink[i].sss = i;
45
46 iLink[flag].className = 'cur';
47
48 iBd[flag].style.display = 'block';
49
50 iLink[i].onclick = function(){change(this.sss)}
51
52 }
53
54 function change(v){
55
56 iLink[flag].className = '';
57
58 iBd[flag].style.display = 'none';
59
60 flag = v;
61
62 iLink[flag].className = 'cur';
63
64 iBd[flag].style.display ='block';
65
66 }
67
68 </script>
69
70 </body>
71 </html>
