可重复使用的简洁Tab选项卡

2024-09-05 12:19:49

字体：大中小

来源：转载

供稿：网友

我们在使用网页选项卡的时候总想让它可以重复使用，因为有时候我们布局的一个网页上需要使用多个选项卡。本代码段就提供了这样一种解决方案，也许你从代码就可以看出规律了，其实重复使用非常简单，方法是：把上面的two复制，把two改成three,或任何一个不同名的id，把上边定义选项卡ID的CSS再复制一个，把ID改成你新增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 - www.vevb.com</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">网友关注</li>   <li id="one2" onclick="setTab('one',2,4)" >最新更新</li>   <li id="one3" onclick="setTab('one',3,4)">下载排行</li>      <li id="one4" onclick="setTab('one',4,4)">源码分类</li></ul></div> <div class="lib_Contentbox lib_tabborder">     <div id="con_one_1" >网友关注对应的内容</div>   <div id="con_one_2" style="display:none">最新更新对应的内容</div>   <div id="con_one_3" style="display:none">下载排行对应的内容</div>   <div id="con_one_4" style="display:none">源码分类对应的内容</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>

上一篇：又一竖向简洁Tab网页选项卡

下一篇：教你一个最简单的CSS滑过变色的菜单