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 body{text-align:center;margin:0;padding:0;font-size:12px;}
7 div,form,img,ul,ol,li,dl,dt,dd{margin:0;padding:0;border:0;}
8 h1,h2,h3,h4,h5,h6,p,table,td{margin:0;padding:0;font-size:12px;}
9 li{list-style:none;}
10 #layout{width:500px;margin:10px auto;}
11 #tabnav{width:80px;float:left;}
12 #tabnav li{float:left;width:70px;height:23px;line-height:23px;cursor:pointer;border:1px solid #ccc;margin:2px 0 0 0;display:inline;color:#333;}
13 #tabnav li.current{color:#f60;font-weight:bold;}
14 #tab{width:400px;height:235px;float:right;}
15 #tab ul{width:400px;height:24px;}
16 #tab li{float:left;width:70px;height:23px;line-height:23px;cursor:pointer;border:1px solid #ccc;margin:0 1px 0
17
18 0;display:inline;background:#333;color:#fff;}
19 #tab li.current{background:#f60;font-weight:bold;}
20 #tab .tabcon{float:left;width:398px;height:208px;display:none;border:1px solid #ccc;}
21 #tab .block{display:block;}
22 </style>
23 </head>
24 <body>
25 <div id="layout">
26 <ul id="tabnav">
27 <li onclick="go_to(1);" class="current">最新精华帖</li>
28 <li onclick="go_to(2);">最新帖子</li>
29 <li onclick="go_to(3);">最旧帖子</li>
30 <li onclick="go_to(4);">新最帖子</li>
31 <li onclick="go_to(5);">旧最帖子</li>
32 </ul>
33 <div id="tab">
34 <ul id="tabnav02">
35 <li onclick="go_to(1);" class="current">最新精华帖</li>
36 <li onclick="go_to(2);">最新帖子</li>
37 <li onclick="go_to(3);">最旧帖子</li>
38 <li onclick="go_to(4);">新最帖子</li>
39 <li onclick="go_to(5);">旧最帖子</li>
40 </ul>
41 <div id="tabcon_1" class="tabcon block">
42 1
43 </div>
44 <div id="tabcon_2" class="tabcon">
45 2
46 </div>
47 <div id="tabcon_3" class="tabcon">
48 3
49 </div>
50 <div id="tabcon_4" class="tabcon">
51 4
52 </div>
53 <div id="tabcon_5" class="tabcon">
54 5
55 </div>
56 <script type="text/javascript">
57 <!--
58 var h=document.getElementById("tabnav").getElementsByTagName("li");
59 var d=document.getElementById("tabnav02").getElementsByTagName("li");
60 function go_to(s){
61 for(var i=1;i<=h.length;i++){
62 if(s==i){
63 h[i-1].className="current";
64 d[i-1].className="current";
65 document.getElementById("tabcon_"+i).className="tabcon block";
66 }
67 else{
68 h[i-1].className="";
69 d[i-1].className="";
70 document.getElementById("tabcon_"+i).className="tabcon";
71 }
72 }
73 }
74 //-->
75 </script>
76 </div>
77 </div>
78 </body>
79 </html>
80 <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
文章来自：http://www.webdm.cn/webcode/1b57b0a4-02bc-490b-a752-c06c2f7e6955.html
