首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

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

2012-04-15 
js选项卡的问题 解决一个页面不能用两个选项卡//JS代码:function tabOn(tabid,a) {for (i1i10i++) {i

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到另一个地方后 新的就不能切换了

------解决方案--------------------


这代码看得人那叫一个蛋疼
[解决办法]

JScript code
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");}}} 

热点排行