精品久久亚洲_69pao在线成人免费视频_黄色三级网络_亚洲国产精品激情在线观看

您的位置: 首頁 > 源碼資料

最簡單的css+div制作的TAB標簽,一頁面可同時放多個

源碼資料　時間:2013-09-27　作者/發布人:科杰在線　點擊:4629

<!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>最簡單的css+div制作的TAB標簽,一頁面可同時放多個,來自 科杰在線www.yeewaa.com</title>
<style type="text/css">
<!--
body{ padding:0;font:12px "宋體";  }
/*選項卡1*/
#lib_Tab1{width:600px;margin:0px;padding:0px;margin-bottom:15px;}
/*選項卡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 />
一個頁面中如果使用多個TAB，就把上面的two復制,把two改成three,或任何一個不同名的id，如果要改變點擊切換標簽的形式為鼠標移上去就切換的，只要把上面 onclick=xx 改為 onmouseover=xx

</body>
</html>
 

--------------------------全文完----------------------------
0% (0)
0% (0)
整站字母快速檢索： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1 2 3 4 5 6 7 8 9 0

綜合報道 經濟形勢 勞動就業 政策法規 熱點推薦 創業新聞 創業指導 創業課堂 創業故事 大學生創業 | 裝修日記 | 學駕駛經歷 | 免費信息發布 | 網站地圖

地址：合肥市臨泉路香格里拉花園 郵箱：pc354@163.com　QQ：55769640 | 皖ICP備06007228號　
版權所有：科杰服務(www.www.yeewaa.com)　建議使用IE7.0或以上版本,最少1280分辨率瀏覽本站,可獲得最佳瀏覽效果

飛到頂部