js选项卡的问题 解决一个页面不能用两个选项卡

//JS代码：
function tabOn(tabid,a) {
for (i=1;i<=10;i++) {
if(i<10){inn="0"+i;} else {inn=""+i;}
tabMenu = document.getElementById("tab"+tabid+"m"+i);
tabContent = document.getElementById("tab"+tabid+"c"+i);
tabMore = document.getElementById("tab"+tabid+"more"+i);
if (tabMenu) {
if (tabMenu.tagName=="IMG") { tabMenu.src = tabMenu.src.replace("on.gif", ".gif"); } 
if (tabMenu.tagName=="A") { tabMenu.className=""; } 
}
if (tabContent) { tabContent.style.display="none"; }
if (tabMore) { tabMore.style.display="none"; }

}
if(a<10){ann="0"+a;} else {ann=""+a;}
tabMenu = document.getElementById("tab"+tabid+"m"+a);
tabContent = document.getElementById("tab"+tabid+"c"+a);
tabMore = document.getElementById("tab"+tabid+"more"+a);
// alert(tabMenu.tagName);
if (tabMenu) {
if (tabMenu.tagName=="IMG") { tabMenu.src = tabMenu.src.replace(".gif", "on.gif"); } 
if (tabMenu.tagName=="A") { tabMenu.className="on"; } 
}
if (tabContent) { tabContent.style.display="block"; }
if (tabMore) { tabMore.style.display="block"; }
}function imgMenuOver(containderID) {
var objwrap = document.getElementById(containderID);
var imgMenu = objwrap.getElementsByTagName("a"); for (i=0; i<imgMenu.length; i++) {
if(imgMenu[i].getElementsByTagName("img").length == 0) continue; if (imgMenu[i].getElementsByTagName("img")[0].src.indexOf("_on.gif") != -1 ) {
continue;
}
imgMenu[i].onmouseover = function() {
subImage = this.getElementsByTagName("img")[0];
if (subImage.src.indexOf("_on.gif") != -1) return false;
subImage.src = subImage.src.replace("_off.gif","_on.gif");
}
imgMenu[i].onfocus = function() {
subImage = this.getElementsByTagName("img")[0];
if (subImage.src.indexOf("_on.gif") != -1) return false;
subImage.src = subImage.src.replace("_off.gif","_on.gif");
}
imgMenu[i].onmouseout = function() {
subImage = this.getElementsByTagName("img")[0];
subImage.src = subImage.src.replace("_on.gif", "_off.gif");
}
imgMenu[i].onblur = function() {
subImage = this.getElementsByTagName("img")[0];
subImage.src = subImage.src.replace("_on.gif", "_off.gif");
}
}
}HTML代码：
<div id="board" class="clearfix"> 
<h2><img src="images/notice_title.gif" width="48" height="13" alt="우석소식" /></h2>
   <ul  class="clearfix">
<li class="first">
<a href="#tab1c1" onclick="tabOn(1,1); return false;"  onmouseover="tabOn(1,1); return false;">
<img src="images/tab1m01on.gif"  height="23" alt="공지" id="tab1m1" />
</a>
   <div id="tab1c1" class="tabcontent">
<ul>
<li>
<a href="#">
[학사]
MOS Master 1,2 시험접..
</a> 
<span>2012-04-11</span>
</li>

</ul>
   </div>
   <div id="tab1more1" class="tab1more">
<a href="#1"><img src="images/board_more.gif" width="31" height="11" alt="查看更多" /></a>
  </div>
</li>
<li> 
<a href="#tab1c2" onclick="tabOn(1,2); return false;" onmouseover="tabOn(1,2); return false;">
<img src="images/tab1m02.gif"  height="23"  alt="행사" id="tab1m2" />
</a>
   <div id="tab1c2" class="tabcontent">
<ul>
<li>
<a href="/boardView.do?bcode=B0062&amp;id=87479&amp;pid=500">
앱 창업 전문코스 참여자(기업) 모집 공..
</a> 
<span>2012-04-10</span>
</li>

</ul>
   </div>
   <div id="tab1more2" class="tab1more">
<a href="/boardList.do?bcode=B0062"><img src="images/board_more.gif" width="31" height="11" alt="查看更多" /></a>
  </div>
</li>
<li>
<a href="#tab1c3" onclick="tabOn(1,3); return false;" onmouseover="tabOn(1,3); return false;">
<img src="images/tab1m03.gif"height="23"  alt="취업" id="tab1m3" />
</a>
   <div id="tab1c3" class="tabcontent">
<ul>
<li>
<a href="/boardView.do?bcode=B0026&amp;id=75579&amp;pid=988">
우석대학교 취업및역량개발센터- 실시간 채..
</a> 
<span>2011-08-16</span>
</li>

</ul>
   </div>
   <div id="tab1more3" class="tab1more">
<a href="/boardList.do?bcode=B0026"><img src="images/board_more.gif" width="31" height="11" alt="查看更多" /></a>
  </div>
</li>
<li>
<a href="#tab1c4" onclick="tabOn(1,4); return false;" onmouseover="tabOn(1,4); return false;">
<img src="images/tab1m04.gif"height="23"  alt="등록·장학" id="tab1m4" />
</a>
   <div id="tab1c4" class="tabcontent">
<ul>
<li>
<a href="/boardView.do?bcode=B0114&amp;id=85237&amp;pid=22">
[등록]
2012년도 1학기 최종 등록기간..
</a> 
<span>2012-03-23</span>
</li>

</ul>
   </div>
   <div id="tab1more4" class="tab1more">
<a href="/boardList.do?bcode=B0114"><img src="images/board_more.gif" width="31" height="11" alt="查看更多" /></a>
  </div>
</li>
   </ul>
   <script type="text/javascript"> tabOn(1,1); </script>
   <!-- //board -->
</div>
我复制一份HTMl到另一个地方后 新的就不能切换了

解决方案 »

  1.   

    需要你自己修改所有的 id 和tabOn 内的参数
    <li class="first">
    <a href="#tab2c1" onclick="tabOn(2,1); return false;" onmouseover="tabOn(2,1); return false;">
    <img src="images/tab2m01on.gif" height="23" alt="공지" id="tab2m1" />
    </a>
    <div id="tab2c1" class="tabcontent">
    <ul>
    <li>
    <a href="#">
    [학사]
    MOS Master 1,2 시험접..
    </a> 
    <span>2012-04-11</span>
    </li>
    </ul>
    </div>
    <div id="tab2more1" class="tab2more">
    <a href="#1"><img src="images/board_more.gif" width="31" height="11" alt="查看更多" /></a>
    </div>
    </li>
    试试看
      

  2.   

    function tabOn(tabid,a) {
    for (i=1;i<=10;i++) {
    if(i<10){inn="0"+i;} else {inn=""+i;}
    tabMenu = document.getElementById("tab"+tabid+"m"+i);
    tabContent = document.getElementById("tab"+tabid+"c"+i);
    tabMore = document.getElementById("tab"+tabid+"more"+i);
    if (tabMenu) {
    if (tabMenu.tagName=="IMG") { tabMenu.src = tabMenu.src.replace("on.gif", ".gif"); }  
    if (tabMenu.tagName=="A") { tabMenu.className=""; }  
    }
    if (tabContent) { tabContent.style.display="none"; }
    if (tabMore) { tabMore.style.display="none"; }}
    if(a<10){ann="0"+a;} else {ann=""+a;}
    tabMenu = document.getElementById("tab"+tabid+"m"+a);
    tabContent = document.getElementById("tab"+tabid+"c"+a);
    tabMore = document.getElementById("tab"+tabid+"more"+a);
    // alert(tabMenu.tagName);
    if (tabMenu) {
    if (tabMenu.tagName=="IMG") { tabMenu.src = tabMenu.src.replace(".gif", "on.gif"); }  
    if (tabMenu.tagName=="A") { tabMenu.className="on"; }  
    }
    if (tabContent) { tabContent.style.display="block"; }
    if (tabMore) { tabMore.style.display="block"; }
    }function imgMenuOver(containderID) {
    var objwrap = document.getElementById(containderID);
    var imgMenu = objwrap.getElementsByTagName("a");for (i=0; i<imgMenu.length; i++) {
    if(imgMenu[i].getElementsByTagName("img").length == 0) continue;if (imgMenu[i].getElementsByTagName("img")[0].src.indexOf("_on.gif") != -1 ) {
    continue;
    }
    imgMenu[i].onmouseover = function() {
    subImage = this.getElementsByTagName("img")[0];
    if (subImage.src.indexOf("_on.gif") != -1) return false;
    subImage.src = subImage.src.replace("_off.gif","_on.gif");
    }
    imgMenu[i].onfocus = function() {
    subImage = this.getElementsByTagName("img")[0];
    if (subImage.src.indexOf("_on.gif") != -1) return false;
    subImage.src = subImage.src.replace("_off.gif","_on.gif");
    }
    imgMenu[i].onmouseout = function() {
    subImage = this.getElementsByTagName("img")[0];
    subImage.src = subImage.src.replace("_on.gif", "_off.gif");
    }
    imgMenu[i].onblur = function() {
    subImage = this.getElementsByTagName("img")[0];
    subImage.src = subImage.src.replace("_on.gif", "_off.gif");
    }
    }
    }