无图版CSS 滑动门，大多数门户都在用_网页代码站(www.webdm.cn)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>无图版CSS 滑动门，大多数门户都在用_网页代码站(www.webdm.cn)</title>
5 <style type="text/css">
6 .tabber{border:1px solid #AACCEE;clear:both;}
7 .tabber .tmenu ul{margin:0;padding:0; display:block;}
8 .tabber .tmenu li{
9 float:left;
10 height:25px;
11 line-height:25px;
12 border-bottom:1px solid #AACCEE;
13 border-right:1px solid #AACCEE;
14 border-color:#AACCEE;
15 border-width:1px;
16 color:#004499;
17 cursor:pointer;
18 display:block;
19 text-align:center;}
20 .tabber .tmenu li.on{
21 background:#FFF;
22 border-bottom-color:#FFFFFF;
23 cursor:default;
24 font-weight:bold;}
25 .tabber .tbox{
26 height:267px;
27 clear:both;}
28 .tabber .tbox div p{padding:15px;}
29 .block{display:block;}
30 .none{display:none;}
31 </style>
32 <script type="text/javascript">
33 function SetTab(tab,id,cnt){
34 var menus=document.getElementById(tab).getElementsByTagName("li");
35 for(i=0;i<cnt;i++){
36 i==id?menus[i].className="on":menus[i].className="";
37 i==id?document.getElementById(tab+"-content"+i).className="block":document.getElementById(tab+"-content"+i).className="none";
38 }
39 }
40 </script>
41 </head>
42 <body>
43 <div class="tabber" style="width: 529px;">
44 <div class="tmenu">
45 <ul id="tab1">
46 <li style="width: 85px;" class="on" onmouseover="SetTab('tab1',0,4);">新闻</li>
47 <li style="width: 85px;" onmouseover="SetTab('tab1',1,4);">娱乐</li>
48 <li style="width: 85px;" onmouseover="SetTab('tab1',2,4);">财经</li>
49 <li style="width: 85px;" onmouseover="SetTab('tab1',3,4);">读书</li>
50 <li style="width: 185px; border-bottom: solid 1px #AACCEE; border-right: none;"><a
51 href="#">关注更多？</a></li>
52 </ul>
53 </div>
54 <div class="tbox">
55 <div id="tab1-content0" class="block">
56 <p>看新闻，上网易</p>
57 </div>
58 <div id="tab1-content1" class="none">
59 <p>娱乐七天乐</p>
60 </div>
61 <div id="tab1-content2" class="none">
62 <p>今天股市暴跌</p>
63 </div>
64 <div id="tab1-content3" class="none">
65 <p>读书使人进步……</p>
66 </div>
67 </div>
68 </div>
69 <br />
70 <div class="tabber" style="width: 343px;">
71 <div class="tmenu">
72 <ul id="tab2">
73 <li style="width: 85px;" class="on" onmouseover="SetTab('tab2',0,4);">新闻</li>
74 <li style="width: 85px;" onmouseover="SetTab('tab2',1,4);">娱乐</li>
75 <li style="width: 85px;" onmouseover="SetTab('tab2',2,4);">Ajax</li>
76 <li style="width: 85px; border-right: none;" onmouseover="SetTab('tab2',3,4);">编程</li>
77 </ul>
78 </div>
79 <div class="tbox">
80 <div id="tab2-content0" class="block">
81 <p>最新的新闻内容</p>
82 </div>
83 <div id="tab2-content1" class="none">
84 <p>时尚娱乐资讯</p>
85 </div>
86 <div id="tab2-content2" class="none">
87 <p>Ajax成就未来……</p>
88 </div>
89 <div id="tab2-content3" class="none">
90 <p> ASP.NET...</p>
91 </div>
92 </div>
93 </div>
94 </body>
95 </html>
96
97 <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
文章来自：http://www.webdm.cn/webcode/d179fc50-c613-4ad7-a96a-c3c4794a9954.html
