大虾们帮忙看看JS选项卡问题。。。

我想让这6个按钮分别切换不同的DIV，不知道错哪里了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" /> <script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js">
</script> <script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar") function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
   thisObj.className = "active";
      document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
   tabList[i].className = "normal";
   document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
</script>
<style type="text/css">
body{font-size:12px; font-family:Verdana,"宋体";}
p,ul{margin:0px; padding:0px;}
td,div{font-size:12px}
.a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;}
.a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;}
.test{text-decoration:underline;}
#b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;}
#b1 div.s strong{color:#0066FF;}
/* */
.style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
#ddtopmenubar,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;}
#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;}
#b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;}
#b8 div a{margin-right:20px;}
.style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;}
.nTab{
float: left;
width: 100%;
margin: 0 auto;
border-bottom:1px #AACCEE solid;
background:#d5d5d5;
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;
}
.nTab .TabTitle{
clear: both;
height: 22px;
overflow: hidden;
}
.nTab .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li{
float: left;
width: 70px;
cursor: pointer;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
font-size: 12px;
text-align: center;
margin: 0;
}
.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
.nTab .TabContent{
width:auto;background:#fff;
margin: 0px auto;
padding:10px 0 0 0;
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
}
.none {display:none;}
</style>
</head>
<body>

<div class="s">
<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li class="active" onclick="nTabs(this,0);"><a href="#">规划报告</a></li>
<li class="normal" rel="ddsubmenu3"><a href="#">规划工程库</a></li>
<li class="normal" onclick="nTabs(this,5);"><a href="#" >工程专题</a></li>
</ul>
</div>  <ul id="ddsubmenu3" class="ddsubmenustyle">
<a href="#" class="normal" onclick="nTabs(this,1);">工程属性汇总表</a>
<a href="#" class="normal" onclick="nTabs(this,2);">开竣工时间表</a>
<a href="#" class="normal" onclick="nTabs(this,3);">投资汇总表</a>
<a href="#" class="normal" onclick="nTabs(this,4);">工程特性汇总表</a>
</ul>     
    <div class="TabContent">
      <div id="myTab1_Content0"> 000 </div>
      <div id="myTab1_Content1" class="none"> 111 </div>
      <div id="myTab1_Content2" class="none"> 222 </div>
      <div id="myTab1_Content3" class="none"> 333 </div>
      <div id="myTab1_Content4" class="none"> 444 </div>
      <div id="myTab1_Content5" class="none"> 555 </div>
      <div id="myTab1_Content6" class="none"> 666 </div>     </div>

</div>

</div>
</body>
</html>
主要用的JS都在页面上，引入的没用

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" /> <script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js">
</script> <script type="text/javascript">
//ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar") function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
  thisObj.className = "active";
  document.getElementById("myTab1_Content"+i).style.display = "block";
}else{
  tabList[i].className = "normal";
  document.getElementById("myTab1_Content"+i).style.display = "none";
}
}
} function nTabs(thisObj,Num)
{
var li = document.getElementById("myTab1_Content"+Num);
if( li.checked ) return;
var lis = document.getElementById("TabContent").childNodes;
for(var i=0,l=null;l=lis[i];i++)
{
l.checked = false;
l.style.display = "none";
}
li.style.display = "block";
li.checked = true;
}
</script>
<style type="text/css">
body{font-size:12px; font-family:Verdana,"宋体";}
p,ul{margin:0px; padding:0px;}
td,div{font-size:12px}
.a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;}
.a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;}
.test{text-decoration:underline;}
#b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;}
#b1 div.s strong{color:#0066FF;}
/* */
.style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
#ddtopmenubar,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;}
#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;}
#b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;}
#b8 div a{margin-right:20px;}
.style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;}
.nTab{
float: left;
width: 100%;
margin: 0 auto;
border-bottom:1px #AACCEE solid;
background:#d5d5d5;
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;
}
.nTab .TabTitle{
clear: both;
height: 22px;
overflow: hidden;
}
.nTab .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li{
float: left;
width: 70px;
cursor: pointer;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
font-size: 12px;
text-align: center;
margin: 0;
}
.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
.nTab .TabContent{
width:auto;background:#fff;
margin: 0px auto;
padding:10px 0 0 0;
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
}
.none {display:none;}
</style>
</head>
<body>

<div class="s">
<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li class="active" onclick="nTabs(this,0);"> <a href="#">规划报告 </a> </li>
<li class="normal" rel="ddsubmenu3"> <a href="#">规划工程库 </a> </li>
<li class="normal" onclick="nTabs(this,5);"> <a href="#" >工程专题 </a> </li>
</ul>
</div>  <ul id="ddsubmenu3" class="ddsubmenustyle">
<li><a href="#" class="normal" onclick="nTabs(this,1);">工程属性汇总表 </a> </li>
<li><a href="#" class="normal" onclick="nTabs(this,2);">开竣工时间表 </a> </li>
<li><a href="#" class="normal" onclick="nTabs(this,3);">投资汇总表 </a> </li>
<li><a href="#" class="normal" onclick="nTabs(this,4);">工程特性汇总表 </a> </li>
</ul>     
    <div class="TabContent" id="TabContent">
      <div id="myTab1_Content0"> 000 </div>
      <div id="myTab1_Content1" class="none"> 111 </div>
      <div id="myTab1_Content2" class="none"> 222 </div>
      <div id="myTab1_Content3" class="none"> 333 </div>
      <div id="myTab1_Content4" class="none"> 444 </div>
      <div id="myTab1_Content5" class="none"> 555 </div>
      <div id="myTab1_Content6" class="none"> 666 </div>     </div>

</div>

</div>
</body>
</html>lz是要这个效果么？