JS选项卡切换

JS选项卡切换

问题描述:

我想让这6个按钮分别切换不同的DIV,不知道错哪里了。





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"; } } } 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;}


<!-- 内容开始 -->
<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>



lz你的样式没有贴出来

打包上传一下吧

qq735423782