清新选项卡（一个页面布局两个）

2024-09-05 12:20:15

字体：大中小

来源：转载

供稿：网友

一个横排的清新选项卡，在一个页面布局两个，把上面的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 id="lib_Tab1"><div class="lib_Menubox lib_tabborder"><ul>   <li id="one1" onclick="setTab('one',1,4)" class="hover">ASP</li>   <li id="one2" onclick="setTab('one',2,4)" >PHP</li>   <li id="one3" onclick="setTab('one',3,4)">.NET</li>      <li id="one4" onclick="setTab('one',4,4)">JSP</li></ul></div> <div class="lib_Contentbox lib_tabborder">     <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">.NET</div>   <div id="con_one_4" style="display:none">JSP</div>  </div></div><div id="lib_Tab2"><div class="lib_Menubox lib_tabborder"><ul>   <li id="two1" onclick="setTab('two',1,4)" >源码爱好者</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 class="lib_Contentbox lib_tabborder">     <div id="con_two_1" >源码爱好者</div>   <div id="con_two_2" style="display:none">最新更新</div>   <div id="con_two_3" style="display:none">下载排行</div>   <div id="con_two_4" style="display:none">最新更新</div>  </div></div></body></html>

上一篇：点击展开的下拉菜单

下一篇：横向三级展开的CSS菜单