JS+DIV 选项卡页面

来源:互联网 发布:淘宝分销系统 编辑:程序博客网 时间:2024/06/05 13:17

 <!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 "宋体"; 
 
}
/*Tab1*/
#lib_Tab1{
 width:100%;
 margin:0px;
 padding:0px;
 margin-bottom:15px;
}

.lib_tabborder{
 border:1px solid #FD8000;
}
.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:#FFFFFF;
 font-weight:bold;
 margin-right:2px;
 height:25px;
 line-height:25px;
 background-color:#FF9966
}

.lib_Menubox li.hover{
 padding:0px;
 background:#fff;
 width:116px;
 border-left:1px solid #FD8000;
 border-top:1px solid #FD8000;
 border-right:1px solid #FD8000;
 color:#000000;
 height:25px;
 line-height:25px;
}
.lib_Contentbox{
 clear:both;
 margin-top:0px;
 border-top:none;
 height:600px;
 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" align="center">
<div class="lib_Menubox lib_tabborder">
<ul>
   <li id="one1" onclick="setTab('one',1,3)" class="hover">自助答疑</li>
   <li id="one2" onclick="setTab('one',2,3)">我要咨询</li>
   <li id="one3" onclick="setTab('one',3,3)">我要留言</li>  
</ul>
</div>
 <div class="lib_Contentbox lib_tabborder"> 
   <div id="con_one_1" >
 <iframe frameborder="0" scrolling="no" src="http://www.163.com"  height="100%" width="100%"></iframe>
 </div>
   <div id="con_one_2" style="display:none">
 <iframe frameborder="0" scrolling="no" src="http://www.sina.com" height="100%" width="100%"></iframe>
 </div>
   <div id="con_one_3" style="display:none">
 <iframe frameborder="0" scrolling="no" src="http://www.sohu.com" height="100%" width="100%"></iframe>
 </div>
 </div>
</div>
</body>
</html>

原创粉丝点击