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 id="Tab1"><div 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 class="Contentbox">    <div id="con_one_1" >ASP源码</div>   <div id="con_one_2" style="display:none">PHP源码</div>   <div id="con_one_3" style="display:none">JAVA源码</div>   <div id="con_one_4" style="display:none">DELPHI源码</div> </div></div><br><div id="Tab2"><div 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 class="Contentbox">    <div id="con_two_1" >ASP源码</div>   <div id="con_two_2" style="display:none">PHP源码</div>   <div id="con_two_3" style="display:none">JAVA源码</div>   <div id="con_two_4" style="display:none">DELPHI源码</div> </div></div></body></html>

上一篇：滑动门封装类

下一篇：CSS选项卡、滑动门代码