Js+Table網頁分類標簽(Tab)選項卡

2024-09-05 12:19:40

字體：大中小

來源：轉載

供稿：網友

又一個網頁分類標簽(Tab)選項卡，Js+Table技術實現，不懂CSS的朋友可以考慮一下這一款，用TABLE布局時候有時候比CSS更方便，難度降底，適用于大多數設計者使用。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>選項卡</title><style>body { text-align: center;} TD {FONT-SIZE: 12px; COLOR: #333;}.solid-bottom {BORDER-BOTTOM: #dddddd 1px solid}.sec1  {background-color:  #F4F4F4;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:  #EAEAEA;cursor:  hand;color:  #58A200;border-left:  1px  solid  #FFFFFF;border-top:  1px  solid  #FFFFFF;border-right:  1px  solid  gray;font-weight:  bold;}</style></head><body><table width="400" border="0" cellpadding="0" cellspacing="0" class="solid-bottom">  <tr>    <td width="383" height="19"><table  border="0"  cellpadding="0"  cellspacing="0"  id="secTable">      <tr>        <td  width="70" align="center"  class="sec2"  onclick="secBoard(0)">AveIcon</td>        <td  width="120" align="center"  class="sec1"  onclick="secBoard(1)">SWF_Decompiler</td>        <td  width="110" align="center"  class="sec1"  onclick="secBoard(2)">FlashCatcher</td>      </tr>    </table></td>    <td width="17"><script  language="JavaScript" type="text/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></td>  </tr></table><table  border="0"  cellspacing="5"  cellpadding="0"  width="400"  height="120"  id="mainTable">  <tbody  style="display:block;">    <tr>      <td height="120"><table width="100%" border="0" cellspacing="0" cellpadding="0">        <tr>          <td height="72"><img src="/d/file/p/2024/09-05/be1e0e992847dad8a0513ec0bceb48ec.gif" width="180" height="41" align="left" />AveIcon 是一個小巧的 ICO/PNG 互轉小工具，有了它你就不用再打開龐大的 Axialis IconWorkshop   了，只需拖動圖片到窗口中再拖動回來，轉換就完成了。 </td>        </tr>        <tr>          <td height="22" align="right">立刻下載 AveIcon</td>        </tr>      </table></td>    </tr>  </tbody>  <tbody  style="display:none;">    <tr>      <td height="120"><table width="100%" border="0" cellspacing="0" cellpadding="0">        <tr>          <td height="72"><img src="/d/file/p/2024/09-05/be1e0e992847dad8a0513ec0bceb48ec.gif" width="51" height="53" align="right" />用于瀏覽和解析Flash動畫.swf文件的工具。它能夠將flash動畫中的圖片、矢量圖、字體、文字、按鈕、影片片段、幀等基本元素完全分解，還可以對flash影片動作Action進行解析，清楚的顯示其動作的代碼，讓您對Flash動畫的構造一目了然。</td>        </tr>        <tr>          <td height="22" align="right">下載 SWF_Decompiler</td>        </tr>      </table></td>    </tr>  </tbody>  <tbody  style="display:none;">    <tr>      <td height="120"><table width="100%" border="0" cellspacing="0" cellpadding="0">        <tr>          <td height="72"><img src="/d/file/p/2024/09-05/be1e0e992847dad8a0513ec0bceb48ec.gif" width="180" height="40" align="left" />在瀏覽網頁的時候，有沒有為了保存一個喜歡的Flash而不知所措呢？別急，本軟件可以讓您輕而易舉地將頁面中的Flash給抓出來，保存Flash就這么簡單。</td>        </tr>        <tr>          <td height="22" align="right">下載 FlashCatcher</td>        </tr>      </table></td>    </tr>  </tbody>  <tbody  style="display:none;">  </tbody></table></body></html>

上一篇：超實用的JS后臺折疊管理菜單

下一篇：JS+Css伸縮菜單，紅色