转载自：http://www.cnblogs.com/seagate_cn/archive/2007/06/12/780329.html
1
<html>
2 <head>
3
<style type="text/css">
4
.tabheader table {
5 border-collapse: collapse; /* for IE */
6 border-spacing: 0; /* for N6 */
7
}
8
9.tabheader table tr td {margin:0;padding:0;border-width:0}
10
11.tabheader .close {
12 border-style: solid;
13 border-width: 1px;
14 border-color: #000;
15 background-color: #d0d0d0;
16 margin:0;
17 padding: 0.5em;
18 white-space: nowrap;
19}
20.tabheader .open {
21 border-style: solid;
22 border-width: 1px;
23 border-color: #000 #000 #fff #000;
24 background-color: white;
25 margin:0;
26 padding: 0.5em;
27 white-space: nowrap;
28}
29.tabheader .spc {
30 border-style: solid;
31 border-width: 1px 0 1px 0;
32 border-color: #fff #fff #000 #fff;
33 margin:0;
34 padding: 0.5em;
35 white-space: nowrap;
36}
37
38.tabheader a {text-decoration: none;}
39.tabbody {
40 border-color: black;
41 border-style: solid;
42 border-width: 0 1px 1px 1px;
43 padding: 1em;
44
}
45</style>
46<script language="JavaScript">
47<!--
48
49function seltab(bpref, hpref, id_max, selected) {
50 if (! document.getElementById) return;
51 for (i = 0; i <= id_max; i++) {
52 if (! document.getElementById(bpref + i)) continue;
53 if (i == selected) {
54 document.getElementById(bpref + i).style.visibility = "visible";
55 document.getElementById(bpref + i).style.position = "";
56 document.getElementById(hpref + i).className = "open";
57 } else {
58 document.getElementById(bpref + i).style.visibility = "hidden";
59 document.getElementById(bpref + i).style.position = "absolute";
60 document.getElementById(hpref + i).className = "close";
61 }
62 }
63}
64// -->
65</script>
66<title>Tab功能</title>
67</head>
68 <body bgcolor="white" onload="seltab('box', 'head', 10, 1)">
69 <h1></h1>
70 <div class="tabheader">
71 <table>
72 <tr>
73 <td>
74 <div id="head1">
75 <a href="javascript:seltab('box', 'head', 10, 1)">tab1</a>
76 </div>
77 </td>
78 <td><div class="spc"> </div>
79 </td>
80 <td>
81 <div id="head2">
82 <a href="javascript:seltab('box', 'head', 10, 2)">tab2</a>
83 </div>
84 </td>
85 <td><div class="spc"> </div>
86 </td>
87 <td>
88 <div id="head3">
89 <a href="javascript:seltab('box', 'head', 10, 3)">tab3</a>
90 </div>
91 </td>
92 <td><div class="spc"> </div>
93 </td>
94 <td>
95 <div id="head4">
96 <a href="javascript:seltab('box', 'head', 10, 4)">tab4</a>
97 </div>
98 </td>
99 <td width="100%"><div class="spc"> </div>
100 </td>
101 </tr>
102 </table>
103 </div>
104 <div class="tabbody">
105 <div id="box1">
106 <p>
107 test
108 </p>
109 </div>
110 <div id="box2">
111 <p>test
112 </p>
113 <p>test
114 </p>
115 </div>
116 <div id="box3">
117 <p>testtesttest
118 </p>
119 </div>
120 <div id="box4">
121 <p>
122 testtest
123 </p>
124 </div>
125 </div>
126 </div>
127 </body>
128</html>
129
.tabheader table
posted on
