簡潔 Tab 選項卡，CSS代碼

2024-09-05 12:20:39

字體：大中小

來源：轉載

供稿：網友

簡潔 Tab 選項卡，CSS代碼，一個頁面中如果使用多個TAB，就把上面的two復制,把two改成three,或任何一個不同名的id.

<!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>簡潔Tab</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">新聞1</li>   <li id="one2" onclick="setTab('one',2,4)" >新聞2</li>   <li id="one3" onclick="setTab('one',3,4)">新聞3</li>      <li id="one4" onclick="setTab('one',4,4)">新聞4</li></ul></div> <div   id="iwvjtn8m0"   class="lib_Contentbox lib_tabborder">     <div   class="iwvjtn8m0"   id="con_one_1" >新聞列表1</div>   <div   class="iwvjtn8m0"   id="con_one_2" style="display:none">新聞列表2</div>   <div   class="iwvjtn8m0"   id="con_one_3" style="display:none">新聞列表3</div>   <div   class="iwvjtn8m0"   id="con_one_4" style="display:none">新聞列表4</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)" >新聞1</li>   <li id="two2" onclick="setTab('two',2,4)"class="hover" >新聞2</li>   <li id="two3" onclick="setTab('two',3,4)">新聞3</li>      <li id="two4" onclick="setTab('two',4,4)">新聞4</li></ul></div> <div   id="iwvjtn8m0"   class="lib_Contentbox lib_tabborder">     <div   class="iwvjtn8m0"   id="con_two_1" >新聞列表1</div>   <div   class="iwvjtn8m0"   id="con_two_2" style="display:none">新聞列表2</div>   <div   class="iwvjtn8m0"   id="con_two_3" style="display:none">新聞列表3</div>   <div   class="iwvjtn8m0"   id="con_two_4" style="display:none">新聞列表4</div>  </div></div></body></html>

上一篇：jQuery 讓你的Tab菜單滾動的代碼

下一篇：CSS豎向Tab代碼