模拟Windows选项卡

旧城等待， 2022-09-17 14:24 181阅读 0赞

<style type=text/css>  
td \{  
font-size: 12px;  
color: \#000000;  
line-height: 150%;  
\}  
.sec1 \{  
background-color: \#EEEEEE;  
cursor: hand;  
color: \#000000;  
border-left: 1px solid \#FFFFFF;  
border-top: 1px solid \#FFFFFF;  
border-right: 1px solid gray;  
border-bottom: 1px solid \#FFFFFF  
\}  
.sec2 \{  
background-color: \#D4D0C8;  
cursor: hand;  
color: \#000000;  
border-left: 1px solid \#FFFFFF;  
border-top: 1px solid \#FFFFFF;  
border-right: 1px solid gray;  
font-weight: bold;  
\}  
.main\_tab \{  
background-color: \#D4D0C8;  
color: \#000000;  
border-left:1px solid \#FFFFFF;  
border-right: 1px solid gray;  
border-bottom: 1px solid gray;  
\}  
</style>  
<script language=javascript>  
function secBoard(n)  
\{  
for(i=0;i<secTable.cells.length;i++)  
secTable.cells\[i\].className="sec1";  
secTable.cells\[n\].className="sec2";  
for(i=0;i<mainTable.tBodies.length;i++)  
mainTable.tBodies\[i\].style.display="none";  
mainTable.tBodies\[n\].style.display="block";  
\}  
</script>  
<table border=0 cellspacing=0 cellpadding=0 width=549 id=secTable>  
<tr height=20 align=center>  
<td class=sec2 width=10% οnclick="secBoard(0)">关于TBODY标记</td>  
<td class=sec1 width=10% οnclick="secBoard(1)">关于cells集合</td>  
<td class=sec1 width=10% οnclick="secBoard(2)">关于tBodies集合</td>  
<td class=sec1 width=10% οnclick="secBoard(3)">关于display属性</td>  
</tr>  
</table>  
<table border=0 cellspacing=0 cellpadding=0 width=549 height=240 id=mainTable class=main\_tab>  
<tbody style="display:block;">  
<tr>  
<td align=center valign=top> <br>  
<br>  
这里填加内容，略去。1 </td>  
</tr>  
</tbody> <tbody style="display:none;">  
<tr>  
<td align=center valign=top> <br>  
<br>  
这里填加内容，略去。2 </td>  
</tr>  
</tbody> <tbody style="display:none;">  
<tr>  
<td align=center valign=top> <br>  
<br>  
这里填加内容，略去。3 </td>  
</tr>  
</tbody> <tbody style="display:none;">  
<tr>  
<td align=center valign=top> <br>  
<br>  
这里填加内容，略去。4 </td>  
</tr>  
</tbody>  
</table>