快捷導(dǎo)航

關(guān)于< tbody >的一個(gè)實(shí)例，很實(shí)用。

更新時(shí)間：2008年03月13日 20:45:07 作者：

tbody Tab選項(xiàng)卡效果代碼關(guān)鍵只是在<tbody>和選項(xiàng)卡的設(shè)置上。我在6個(gè)<tr></tr>段分別設(shè)置了<tbody></tbody>，目的是為了讓一個(gè)javascript程序調(diào)用6個(gè)選項(xiàng)卡的時(shí)候可以循環(huán)設(shè)置tBodies屬性。調(diào)用的時(shí)候是采用了遍歷：將6個(gè)tBodies先全部都初始化為display='none'，然后緊接著將tBodies[n]設(shè)置為display='block'，將這一個(gè)tBodies顯示出來(lái)。

看到很多網(wǎng)友對(duì)tbody屬性的討論，我特意做了個(gè)實(shí)例，希望能對(duì)大家有所幫助。

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">  <html>  <head>  <title> 腳本之家 tbody 選項(xiàng)卡效果演示</title>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <meta name="Generator" content="EditPlus">  <meta name="Author" content="田耕">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style type="text/css">  body,table,tr,td{      font-size:12px;      color:#000000;      }  .sec1 {       background-color: #99CC99;      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>    </head>  <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0">  <table width="588" border="0" cellspacing="1" cellpadding="4" align="center">    <tr>       <td width="82%">當(dāng)前位置：展館分布 &gt; <span id="weizi"><b>A</b>展館<b>1</b>樓展廳</span></td>      <td width="18%">&nbsp;</td>    </tr>    <tr>       <td colspan="2" height="1" bgcolor="#000000"></td>    </tr>    <tr>       <td colspan="2" height="4"></td>    </tr>     <tr>       <td colspan="2">        <table border=0 cellspacing=0 cellpadding=0 width=578 id=secTable>          <tr height=20 align=center>             <td class=sec2 width=10% onClick="secBoard(0,'a','1')">A展館1樓展廳</td>            <td class=sec1 width=10% onClick="secBoard(1,'a','2')">A展館2樓展廳</td>            <td class=sec1 width=10% onClick="secBoard(2,'b','1')">B展館1樓展廳</td>            <td class=sec1 width=10% onClick="secBoard(3,'b','2')">B展館2樓展廳</td>            <td class=sec1 width=10% onClick="secBoard(4,'c','1')">C展館1樓展廳</td>            <td class=sec1 width=10% onClick="secBoard(5,'c','2')">C展館2樓展廳</td>          </tr>        </table>        <table border=0 cellspacing=0 cellpadding=0 width=578 height=160 id=mainTable class=main_tab>          <tbody style="display:block;">           <tr>             <td align="center">              一            </td>          </tr>          </tbody> <tbody style="display:none;">           <tr>             <td align="center">              二            </td>          </tr>          </tbody> <tbody style="display:none;">           <tr>             <td align="center">              三            </td>          </tr>          </tbody> <tbody style="display:none;">           <tr>             <td align="center">              四            </td>          </tr>          </tbody><tbody style="display:none;">           <tr>             <td align="center">              五            </td>          </tr>          </tbody><tbody style="display:none;">           <tr>             <td align="center">              六            </td>          </tr>          </tbody>         </table>      </td>    </tr>  </table>      </body>  </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]