阅读新闻

同一页面使用多个TAB选项卡

[日期:2007-09-04] [字体: ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml"  xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>同一页面使用多个TAB选项卡</title>
<style type="text/css">
<!--
/* 全局CSS定义 */
body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
/* 2列 */
.divArea{margin:0 auto; width:180px;background:url("http://www.chinacity.org.cn/mail/3/image/bg.gif");}
.divArea .Col2{ width:180px;}
/* 右边选项卡 */
.n4Tab{clear:both;border-bottom:1px #CCCCCC solid;}
.n4Tab .TabTitle{}
.n4Tab .TabTitle ul{margin:0; padding:0;}
.n4Tab .TabTitle li{float:left; width:60px; height:26px; list-style-type:none;cursor:pointer;}
.n4Tab .TabTitle li h6{font-size:12px; font-weight:normal; padding:8px 0 0;margin:0;}
.n4Tab .TabTitle .normal{background:url("http://www.52vision.cn/attachments/month_0703/select//admenu_bg2.gif");}
.n4Tab .TabTitle .active{background:url("http://www.52vision.cn/attachments/month_0703/select//admenu_bg1.gif");}
.n4Tab .TabContent {padding:10px;}
.none {display:none;}
a {
 font-size: 12px;
 color: #000000;
}
a:link {
 text-decoration: none;
}
a:visited {
 text-decoration: none;
 color: #000000;
}
a:hover {
 text-decoration: underline;
 color: #FF0000;
}
a:active {
 text-decoration: none;
 color: #000000;
}
-->
</style>
<script type="text/javascript">
function nTabs(tabObj,obj){
 var tabList = document.getElementById(tabObj).getElementsByTagName("li");
 for(i=0; i <tabList.length; i++)
 {
  if (tabList[i].id == obj.id)
  {
   document.getElementById(tabObj+"_Title"+i).className = "active";
      document.getElementById(tabObj+"_Content"+i).style.display = "block";
  }else{
   document.getElementById(tabObj+"_Title"+i).className = "normal";
   document.getElementById(tabObj+"_Content"+i).style.display = "none";
  }
 }
}
</script>
</head>
<body>
<br />
<!-- 内容开始 -->
<div class="divArea">
  <!-- right -->
  <div class="Col2">
    <!-- 分类信息开始 -->
    <div class="n4Tab" id="n4Tab" style="height:177px;">
      <div class="TabTitle">
        <ul>
          <li id="n4Tab_Title0" onmouseover="nTabs('n4Tab',this);" class="active"><h6><a href="javascript:void(0);">资讯</a></h6></li>
          <li id="n4Tab_Title1" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="javascript:void(0);">教育</a></h6></li>
          <li id="n4Tab_Title2" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="javascript:void(0);">房产</a></h6></li>
        </ul>
      </div>
      <div class="TabContent">
        <div id="n4Tab_Content0"> ah </div>
        <div id="n4Tab_Content1" class="none"> sh </div>
        <div id="n4Tab_Content2" class="none"> dh </div>
        <div id="n4Tab_Content3"  class="none"> vh </div>
        <div id="n4Tab_Content4" class="none"> nh </div>
      </div>
    </div>
 <!-- 分类信息结束 -->
  </div>
</div>
<br>
<div class="divArea">
<div class="Col2">
    <!-- 分类信息开始 -->
    <div class="n4Tab" id="n4Tab1" style="height:177px;">
      <div class="TabTitle">
        <ul>
          <li id="n4Tab1_Title0" onmouseover="nTabs('n4Tab1',this);" class="active"><h6><a href="javascript:void(1);">资讯</a></h6></li>
          <li id="n4Tab1_Title1" onmouseover="nTabs('n4Tab1',this);" class="normal"><h6><a href="javascript:void(1);">教育</a></h6></li>
          <li id="n4Tab1_Title2" onmouseover="nTabs('n4Tab1',this);" class="normal"><h6><a href="javascript:void(1);">房产</a></h6></li>
        </ul>
      </div>
      <div class="TabContent">
        <div id="n4Tab1_Content0"> ah </div>
        <div id="n4Tab1_Content1" class="none"> sh </div>
        <div id="n4Tab1_Content2" class="none"> dh </div>
        <div id="n4Tab1_Content3"  class="none"> vh </div>
        <div id="n4Tab1_Content4" class="none"> nh </div>
      </div>
    </div>
 <!-- 分类信息结束 -->
  </div>
</div>
<!-- 内容结束 -->
</body>
</html>
推荐 打印 | 录入:张羽 | 阅读: 次 | 关闭 |
相关新闻      
本文评论   查看全部评论 (0)
表情: 表情 姓名: 可以发表200字内的评论,已打字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款