请教TAB切换问题

我把HTML帖出来! 各位前辈帮我看看吧!!谢谢!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><html>
<head>
<title>简洁TAB选项卡</title>
<script src="tabbed_pages.js" type="text/javascript"></script>
<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>
<style type="text/css">

</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<div id="gallery">
<div class="on" title="zhoubian"><span>周  边</span></div>
<div class="off" title="jingnei"><span>境  内</span></div>
<div class="off" title="jingwai"><span>境  外</span></div>
</div>
<div id="zhoubian" class="show">
<div class="nTab">
<div class="TabTitle">
<ul id="myTab1">
<li class="active" onClick="nTabs(this,0);">培富</li>
<li class="normal" onClick="nTabs(this,1);">博客</li>
        <li class="normal" onClick="nTabs(this,2);">博客</li>
        <li class="normal" onClick="nTabs(this,3);">博客</li>
</ul>
</div>
    <div class="TabContent">
<div id="myTab1_Content0">简洁TAB，滑动门，选项卡</div>
<div id="myTab1_Content1" class="none">2兼容性好</div>
    <div id="myTab1_Content2" class="none">3兼容性好</div>
    <div id="myTab1_Content3" class="none">4兼容性好</div>
    </div>
</div>
</div>
<div id="jingnei" class="hide">
<div class="nTab">
<div class="TabTitle">
<ul id="myTab2">
<li class="active" onClick="nTabs(this,0);">培富</li>
<li class="normal" onClick="nTabs(this,1);">博客</li>
        <li class="normal" onClick="nTabs(this,2);">博客</li>
        <li class="normal" onClick="nTabs(this,3);">博客</li>
</ul>
</div>
    <div class="TabContent">
<div id="myTab2_Content0">简洁TAB，滑动门，选项卡</div>
<div id="myTab2_Content1" class="none">2兼容性好</div>
    <div id="myTab2_Content2" class="none">3兼容性好</div>
    <div id="myTab2_Content3" class="none">4兼容性好</div>
    </div>
</div>
</div>
<div id="jingwai" class="hide">
<div class="nTab">
<div class="TabTitle">
<ul id="myTab3">
<li class="active" onClick="nTabs(this,0);">培富</li>
<li class="normal" onClick="nTabs(this,1);">博客</li>
        <li class="normal" onClick="nTabs(this,2);">博客</li>
        <li class="normal" onClick="nTabs(this,3);">博客</li>
</ul>
</div>
    <div class="TabContent">
<div id="myTab3_Content0">简洁TAB，滑动门，选项卡</div>
<div id="myTab3_Content1" class="none">2兼容性好</div>
    <div id="myTab3_Content2" class="none">3兼容性好</div>
    <div id="myTab3_Content3" class="none">4兼容性好</div>
    </div>
</div>
</div>
</body>
</html>tabbed_pages.js的内容
onload = function() {
var e, i = 0;
while (e = document.getElementById('gallery').getElementsByTagName ('DIV') [i++]) {
if (e.className == 'on' || e.className == 'off') {
e.onclick = function () {
var getEls = document.getElementsByTagName('DIV');
for (var z=0; z<getEls.length; z++) {
getEls[z].className=getEls[z].className.replace('show', 'hide');
getEls[z].className=getEls[z].className.replace('on', 'off');
}
this.className = 'on';
var max = this.getAttribute('title');
document.getElementById(max).className = "show";
}
}
}}
getEls[z].className = getEls[z].className.replace('on', 'off');div id="myTab1_Content1" class="none">2兼容性好</div>连子tab一起替掉了。。修改tabbed_pages.js
    window.onload = function () {
        var e, i = 0;
        while (e = document.getElementById('gallery').getElementsByTagName('DIV')[i++]) {
            if (e.className == 'on' || e.className == 'off') {
                e.onclick = function () {
                    var getEls = document.getElementsByTagName('DIV');
                    for (var z = 0; z < getEls.length; z++) {
                        if (getEls[z].className == 'show' || getEls[z].className == 'on') {///////////////////////////
                            getEls[z].className = getEls[z].className.replace('show', 'hide');
                            getEls[z].className = getEls[z].className.replace('on', 'off');
                        }
                    }
                    this.className = 'on';
                    var max = this.getAttribute('title');
                    document.getElementById(max).className = "show";
                }
            }
        }    }

调试易

请教TAB切换问题

解决方案 »