簡(jiǎn)潔 Tab 選項(xiàng)卡，CSS代碼

2024-09-05 12:20:39

字體：大中小

供稿：網(wǎng)友

簡(jiǎn)潔 Tab 選項(xiàng)卡，CSS代碼，一個(gè)頁(yè)面中如果使用多個(gè)TAB，就把上面的two復(fù)制,把two改成three,或任何一個(gè)不同名的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>簡(jiǎn)潔Tab</title><style type="text/css"></style><script></script></head><body><div   class="70qarhlowxag"   id="lib_Tab1"><div   id="70qarhlowxag"   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="70qarhlowxag"   class="lib_Contentbox lib_tabborder">     <div   class="70qarhlowxag"   id="con_one_1" >新聞列表1</div>   <div   class="70qarhlowxag"   id="con_one_2" style="display:none">新聞列表2</div>   <div   class="70qarhlowxag"   id="con_one_3" style="display:none">新聞列表3</div>   <div   class="70qarhlowxag"   id="con_one_4" style="display:none">新聞列表4</div>  </div></div><div   class="70qarhlowxag"   id="lib_Tab2"><div   id="70qarhlowxag"   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="70qarhlowxag"   class="lib_Contentbox lib_tabborder">     <div   class="70qarhlowxag"   id="con_two_1" >新聞列表1</div>   <div   class="70qarhlowxag"   id="con_two_2" style="display:none">新聞列表2</div>   <div   class="70qarhlowxag"   id="con_two_3" style="display:none">新聞列表3</div>   <div   class="70qarhlowxag"   id="con_two_4" style="display:none">新聞列表4</div>  </div></div></body></html>

上一篇：jQuery 讓你的Tab菜單滾動(dòng)的代碼

下一篇：CSS豎向Tab代碼