您的位置: 首頁(yè) > 源碼資料
最簡(jiǎn)單的css+div制作的TAB標(biāo)簽,一頁(yè)面可同時(shí)放多個(gè)
源碼資料 時(shí)間:2013-09-27 作者/發(fā)布人:科杰在線 點(diǎn)擊:4710
<!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>最簡(jiǎn)單的css+div制作的TAB標(biāo)簽,一頁(yè)面可同時(shí)放多個(gè),來(lái)自 科杰在線www.yeewaa.com</title>
<style type="text/css">
<!--
body{ padding:0;font:12px "宋體"; }
/*選項(xiàng)卡1*/
#lib_Tab1{width:600px;margin:0px;padding:0px;margin-bottom:15px;}
/*選項(xiàng)卡2*/
#lib_Tab2{width:700px;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 class="lib_Menubox lib_tabborder">
<ul>
<li id="one1" onclick="setTab('one',1,4)" class="hover">新聞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 class="lib_Contentbox lib_tabborder">
<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 class="lib_Menubox lib_tabborder">
<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 class="lib_Contentbox lib_tabborder">
<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 />
一個(gè)頁(yè)面中如果使用多個(gè)TAB，就把上面的two復(fù)制,把two改成three,或任何一個(gè)不同名的id，如果要改變點(diǎn)擊切換標(biāo)簽的形式為鼠標(biāo)移上去就切換的，只要把上面 onclick=xx 改為 onmouseover=xx
</body>
</html>
生活常識(shí)
創(chuàng)意無(wú)限
- 英國(guó)“神奇凝膠”緩解“皮肉之苦”(08-03)
- 德攝影師制作奇妙光涂鴉頗似壯觀煙花(組圖)(05-10)
- 英國(guó)女學(xué)生用立體涂鴉畫出“隱形車”(圖)(05-10)
- 創(chuàng)意到實(shí)用！國(guó)外知名地鐵站設(shè)計(jì)欣賞(04-13)
- 工業(yè)革命時(shí)代的粗曠！起重機(jī)造型吊燈(04-13)
源碼資料
資源中心
- 原文：為什么這么多人黑周星馳(全文)(09-12)
- 紅藍(lán)3D眼鏡測(cè)試演示3D圖片-風(fēng)景、人物及其他2..(02-06)
- 紅藍(lán)3D眼鏡測(cè)試演示3D圖片及美女3D視頻-美女篇..(02-06)
- “東亞病夫”是中國(guó)人自已罵自已的,非洋人(08-06)
- eWebEditor不支持IE8、IE7、火狐、傲游的解決..(06-13)
