CSS仿126郵箱TAB選項卡

2024-09-05 12:19:20

字體：大中小

來源：轉載

供稿：網友

仿126郵箱TAB選項卡，DIV+CSS+JS實現，漂亮是必然的，另外它還可以重復多用，一個網頁可以多處調用，這個實例中是兩個TAB，以方便你的理解，暖色調，鼠標點擊生效，和滑動門有點區別。

<!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><br><br><div   class="iwvjtn8m0"   id="Tab1"><div   id="iwvjtn8m0"   class="Menubox"><ul>   <li id="one1" onclick="setTab('one',1,4)" >ASP源碼</li>   <li id="one2" onclick="setTab('one',2,4)" >PHP源碼</li>   <li id="one3" onclick="setTab('one',3,4)">JAVA源碼</li>      <li id="one4" onclick="setTab('one',4,4)">DELPHI源碼</li></ul></div><div   id="iwvjtn8m0"   class="Contentbox">    <div   class="iwvjtn8m0"   id="con_one_1" >ASP源碼</div>   <div   class="iwvjtn8m0"   id="con_one_2" style="display:none">PHP源碼</div>   <div   class="iwvjtn8m0"   id="con_one_3" style="display:none">JAVA源碼</div>   <div   class="iwvjtn8m0"   id="con_one_4" style="display:none">DELPHI源碼</div> </div></div><br><div   class="iwvjtn8m0"   id="Tab2"><div   id="iwvjtn8m0"   class="Menubox"><ul>   <li id="two1" onclick="setTab('two',1,4)" >ASP源碼</li>   <li id="two2" onclick="setTab('two',2,4)" >PHP源碼</li>   <li id="two3" onclick="setTab('two',3,4)">JAVA源碼</li>      <li id="two4" onclick="setTab('two',4,4)">DELPHI源碼</li></ul></div><div   id="iwvjtn8m0"   class="Contentbox">    <div   class="iwvjtn8m0"   id="con_two_1" >ASP源碼</div>   <div   class="iwvjtn8m0"   id="con_two_2" style="display:none">PHP源碼</div>   <div   class="iwvjtn8m0"   id="con_two_3" style="display:none">JAVA源碼</div>   <div   class="iwvjtn8m0"   id="con_two_4" style="display:none">DELPHI源碼</div> </div></div></body></html>

上一篇：滑動門封裝類

下一篇：CSS選項卡、滑動門代碼