选项卡切换代码.doc

求助选项卡切换代码 2010-1-28 20:08 提问者： c346819739 | 浏览次数：2235次 style type=text/css .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 script type=text/javascript 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 div align=center style=padding-left:25px; !-- 选项卡1开始 -- div class=nTab style=width:288px !-- 标题开始 -- div class=TabTitle ul id=myTab1 li class=active onclick=nTabs(this,0);aaa/li li class=normal onclick=nTabs(this,1);bbb/li li class=normal onclick=nTabs(this,2);ccc/li li class=normal onclick=nTabs(this,3);单击/li /ul /div !-- 内容开始 -- div class=TabContent div id=myTab1_Content0 000 /div div id=myTab1_Content1 class=none 111 /div div id=myTab