采用CSS+JS实现简洁的滑动导航栏_网页代码站(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+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)</title>
5 <style type="text/css">
6 *{
7 margin:0;
8 padding:0;
9 font-size:12px;
10 }
11 body{
12 margin:5px;
13 }
14 .Tab{
15 width:300px;
16 }
17 .TabBar{
18 width:300px;
19 list-style-type:none;
20 }
21 .TabBarNormal{
22 float:left;
23 width:60px;
24 border:1px solid #0066CC;
25 border-bottom:0px solid #fff;
26 line-height:24px;
27 text-align:center;
28 margin:0 3px;
29 }
30 .TabBarActive{
31 float:left;
32 width:60px;
33 border:1px solid #0066CC;
34 border-bottom:0px solid #fff;
35 background-color:#EEEEEE;
36 line-height:25px;
37 text-align:center;
38 margin:0 3px;
39 color:red
40 }
41 .TabContent{
42 width:100%;
43 height:200px;
44 border:1px solid #0066CC;
45 padding:5px;
46 position:absolute;
47 margin-top:-1px;
48 }
49 </style>
50 </head>
51 <body>
52 <div class="Tab">
53 <ul class="TabBar">
54 <li id="tab1" class="TabBarActive" onmouseover="showTab(1);">ASP</li>
55 <li id="tab2" class="TabBarNormal" onmouseover="showTab(2);">PHP</li>
56 <li id="tab3" class="TabBarNormal" onmouseover="showTab(3);">AJAX</li>
57 </ul>
58 <div class="TabContent" id="tabContent1">ASP源代码</div>
59 <div class="TabContent" id="tabContent2" >PHP精品源代码</div>
60 <div class="TabContent" id="tabContent3" >Ajax资源脚本</div>
61 </div>
62 <script type="text/javascript">
63 var activeTab =1;
64 var activeTabContent = 1;
65 var i;
66 for (i=2;i<=3;i++) {
67 document.getElementById("tabContent"+i).style.display="none";
68 }
69 function showTabContent(n) {
70 document.getElementById("tabContent"+activeTabContent).style.display="none";
71 document.getElementById("tabContent"+n).style.display="";
72 activeTabContent=n;
73 }
74 function showTab(n) {
75 document.getElementById("tab"+activeTab).className="TabBarNormal";
76 document.getElementById("tab"+n).className="TabBarActive";
77 activeTab=n;
78 showTabContent(n);
79 }
80 </script>
81 </body>
82 </html>
83 <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
文章来自：http://www.webdm.cn/webcode/568e34f2-2a01-4999-bc94-e61367d29571.html
