<html>
<head runat="Server">
<style type="text/css" language="javascript">
.tabheader table {
border-collapse: collapse; /* for IE */
border-spacing: 0; /* for N6 */
}
.tabheader table tr td {margin:0;padding:0;border-width:0}
.tabheader .close {
border-style: solid;
border-width: 1px;
border-color: #000;
background-color: #d0d0d0;
margin:0;
padding: 0.5em;
white-space: nowrap;
}
.tabheader .open {
border-style: solid;
border-width: 1px;
border-color: #000 #000 #fff #000;
background-color: white;
margin:0;
padding: 0.5em;
white-space: nowrap;
}
.tabheader .spc {
border-style: solid;
border-width: 1px 0 1px 0;
border-color: #fff #fff #000 #fff;
margin:0;
padding: 0.5em;
white-space: nowrap;
}
.tabheader a {text-decoration: none;}
.tabbody {
border-color: black;
border-style: solid;
border-width: 0 1px 1px 1px;
padding: 1em;
}
</style>
<script language="JavaScript">
<!--
function seltab(bpref, hpref, id_max, selected) {
if (! document.getElementById) return;
for (i = 0; i <= id_max; i++) {
if (! document.getElementById(bpref + i)) continue;
if (i == selected) {
document.getElementById(bpref + i).style.visibility = "visible";
document.getElementById(bpref + i).style.position = "";
document.getElementById(hpref + i).className = "open";
} else {
document.getElementById(bpref + i).style.visibility = "hidden";
document.getElementById(bpref + i).style.position = "absolute";
document.getElementById(hpref + i).className = "close";
}
}
}
// -->
</script>
<title>Tab功能</title>
</head>
<body bgcolor="white" onload="seltab('box', 'head', 10, 1)">
<h1></h1>
<div class="tabheader">
<table>
<tr>
<td>
<div id="head1">
<a href="javascript:seltab('box', 'head', 10, 1)">tab1</a>
</div>
</td>
<td><div class="spc"> </div>
</td>
<td>
<div id="head2">
<a href="javascript:seltab('box', 'head', 10, 2)">tab2</a>
</div>
</td>
<td><div class="spc"> </div>
</td>
<td>
<div id="head3">
<a href="javascript:seltab('box', 'head', 10, 3)">tab3</a>
</div>
</td>
<td><div class="spc"> </div>
</td>
<td>
<div id="head4">
<a href="javascript:seltab('box', 'head', 10, 4)">tab4</a>
</div>
</td>
<td width="100%"><div class="spc"> </div>
</td>
</tr>
</table>
</div>
<div class="tabbody">
<div id="box1">
<p>
test
</p>
</div>
<div id="box2">
<p>test
</p>
<p>test
</p>
</div>
<div id="box3">
<p>testtesttest
</p>
</div>
<div id="box4">
<p>
testtest
</p>
</div>
</div>
</body>
</html>
