单个网页添加多个tab选项卡的实现代码
同一个网页添加多个tab选项卡的实现代码：
这个是莎龙在制作模板时用到的，在网上找了好长一段时间，主要是牵扯到js函数，所以自己没能亲自实现，所以就拿这个简单的易用的代码分享给大家：http://www.wjdho.com/798.html
<!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></title> <style type=”text/css”> <!– body{ padding:0;font:12px “宋体”; } /*选项卡1*/ #lib_Tab1{width:500px;margin:0px;padding:0px;margin-bottom:15px;} /*选项卡2*/ #lib_Tab2{width:576px;margin:0px;padding:0px;margin-bottom:15px; } /*菜单class*/ .lib_tabborder{border:1px solid #95C9E1;} .lib_Menubox {height:28px;line-height:28px;position:relative;}
.lib_Menubox ul{margin:0px;padding:0px;list-style:none; position:absolute; top:3px; left:0; margin-left:10px; height:25px;text-align:center;} .lib_Menubox li{float:left;display:block;cursor:pointer;width:114px;color:#949694;font-weight:bold; margin-right:2px;height:25px;line-height:25px; background-color:#E4F2FD} .lib_Menubox li.hover{padding:0px;background:#fff;width:116px;border-left:1px solid #95C9E1;border-top:1px solid #95C9E1;border-right:1px solid #95C9E1; color:#739242;height:25px;line-height:25px;} .lib_Contentbox{clear:both;margin-top:0px; border-top:none;height:181px; text-align:center;padding-top:8px;} –> </style> <script> <!– function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById(“con_”+name+”_”+i); menu.className=i==cursel?”hover”:”"; con.style.display=i==cursel?”block”:”none”; } } //–> </script> </head> <body> <div id=”lib_Tab1″> <div> <ul> <li id=”one1″ onclick=”setTab(‘one’,1,4)”>新闻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> <div id=”con_one_1″ >新闻列表1</div> <div id=”con_one_2″ style=”display:none”>新闻列表2</div> <div id=”con_one_3″ style=”display:none”>新闻列表3</div> <div id=”con_one_4″ style=”display:none”>新闻列表4</div> </div> </div>
<div id=”lib_Tab2″> <div> <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> <div id=”con_two_1″ >新闻列表1</div> <div id=”con_two_2″ style=”display:none”>新闻列表2</div> <div id=”con_two_3″ style=”display:none”>新闻列表3</div> <div id=”con_two_4″ style=”display:none”>新闻列表4</div> </div> </div> <bR />
</body> </html> <!–一个页面中如果使用多个TAB，就把上面的two复制,把two改成three,或任何一个不同名的id. –>
浙公网安备 33010602011771号