可重復(fù)使用的簡潔Tab選項卡

2024-09-05 12:19:49

字體：大中小

供稿：網(wǎng)友

我們在使用網(wǎng)頁選項卡的時候總想讓它可以重復(fù)使用，因為有時候我們布局的一個網(wǎng)頁上需要使用多個選項卡。本代碼段就提供了這樣一種解決方案，也許你從代碼就可以看出規(guī)律了，其實重復(fù)使用非常簡單，方法是：把上面的two復(fù)制，把two改成three,或任何一個不同名的id，把上邊定義選項卡ID的CSS再復(fù)制一個，把ID改成你新增TAB相對應(yīng)的名稱。就是這么簡單。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><title>重復(fù)使用的簡潔Tab - www.survivalescaperooms.com</title><style type="text/css"></style><script></script></head><body><div   class="iwvjtn8m0"   id="lib_Tab1"><div   id="iwvjtn8m0"   class="lib_Menubox lib_tabborder"><ul>   <li id="one1" onclick="setTab('one',1,4)" class="hover">網(wǎng)友關(guān)注</li>   <li id="one2" onclick="setTab('one',2,4)" >最新更新</li>   <li id="one3" onclick="setTab('one',3,4)">下載排行</li>      <li id="one4" onclick="setTab('one',4,4)">源碼分類</li></ul></div> <div   id="iwvjtn8m0"   class="lib_Contentbox lib_tabborder">     <div   class="iwvjtn8m0"   id="con_one_1" >網(wǎng)友關(guān)注對應(yīng)的內(nèi)容</div>   <div   class="iwvjtn8m0"   id="con_one_2" style="display:none">最新更新對應(yīng)的內(nèi)容</div>   <div   class="iwvjtn8m0"   id="con_one_3" style="display:none">下載排行對應(yīng)的內(nèi)容</div>   <div   class="iwvjtn8m0"   id="con_one_4" style="display:none">源碼分類對應(yīng)的內(nèi)容</div>  </div></div><div   class="iwvjtn8m0"   id="lib_Tab2"><div   id="iwvjtn8m0"   class="lib_Menubox lib_tabborder"><ul>   <li id="two1" onclick="setTab('two',1,4)" >網(wǎng)友關(guān)注</li>   <li id="two2" onclick="setTab('two',2,4)"class="hover" >最新更新</li>   <li id="two3" onclick="setTab('two',3,4)">下載排行</li>      <li id="two4" onclick="setTab('two',4,4)">源碼分類</li></ul></div> <div   id="iwvjtn8m0"   class="lib_Contentbox lib_tabborder">     <div   class="iwvjtn8m0"   id="con_two_1" >網(wǎng)友關(guān)注對應(yīng)的內(nèi)容</div>   <div   class="iwvjtn8m0"   id="con_two_2" style="display:none">最新更新對應(yīng)的內(nèi)容</div>   <div   class="iwvjtn8m0"   id="con_two_3" style="display:none">下載排行對應(yīng)的內(nèi)容</div>   <div   class="iwvjtn8m0"   id="con_two_4" style="display:none">源碼分類對應(yīng)的內(nèi)容</div>  </div></div></body></html>

上一篇：又一豎向簡潔Tab網(wǎng)頁選項卡

下一篇：教你一個最簡單的CSS滑過變色的菜單