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

转载于:https://www.cnblogs.com/webdm/archive/2010/12/23/1914812.html