求助:怎么在两个div里同时使用该js效果,怎么修改代码才能使用,没有冲突?
<divclass="tabbox"><divclass="tabmenu"><scriptlanguage="javascript">functiontabChange...
<div class="tabbox">
<div class="tabmenu">
<script language="javascript">
function tabChange(obj,id)
{
var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组
var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组
for(i=0;i<arrayul.length;i++)
{
if(obj==arrayli[i])
{
arrayli[i].className = "cli";
arrayul[i].className = "";
}
else
{
arrayli[i].className = "";
arrayul[i].className = "hidden";
}
}
}
</script>
<ul>
<li onmouseover="tabChange(this,'tabcontent')" class="cli">1111</li>
<li onmouseover="tabChange(this,'tabcontent')">2222</li>
<li onmouseover="tabChange(this,'tabcontent')">3333</li>
<li onmouseover="tabChange(this,'tabcontent')">4444</li>
<li onmouseover="tabChange(this,'tabcontent')">5555</li>
<li onmouseover="tabChange(this,'tabcontent')">6666</li>
</ul>
</div>
<div id="tabcontent">
<ul name="tabul">
1111
</ul>
<ul class="hidden">
2222
</ul>
<ul class="hidden">
3333
</ul>
<ul class="hidden">
4444
</ul>
<ul class="hidden">
5555
</ul>
<ul class="hidden">
6666
</ul>
</div>
<div class="clearfloat"></div>
</div>
.tabbox {width:600px;height:300px; margin:0; padding:0; margin-bottom:50px; margin-top:50px;}
.tabmenu {width:px;height:28px;border-left:1px solid #CCC;border-top:1px solid #ccc;}
.tabmenu ul {margin:0;padding:0;list-style-type: none;}
.tabmenu li { text-align:center; float:left; display:block; width:80px; height:27px; overflow:hidden; background-color:#FF9826; line-height:27px; border-right:#ccc 1px solid; border-bottom:#ccc 1px solid; display:inline; font-size:12px;}
.tabmenu .cli {text-align:center;float:left;display:block;width:80px;height:27px;overflow:hidden;background-color: #fff;line-height:27px;border-right:#ccc 1px solid;border-bottom:#fff 1px solid;display:inline;font-size:12px; cursor:pointer;}
#tabcontent {width:600px; height:300px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}
#tabcontent ul {margin:0;padding:5px;list-style-type: none;}
#tabcontent .hidden {display:none;}
比如在下面再加一个div还是要实现这个效果,怎么修改代码才会不冲突???? 展开
<div class="tabmenu">
<script language="javascript">
function tabChange(obj,id)
{
var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组
var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组
for(i=0;i<arrayul.length;i++)
{
if(obj==arrayli[i])
{
arrayli[i].className = "cli";
arrayul[i].className = "";
}
else
{
arrayli[i].className = "";
arrayul[i].className = "hidden";
}
}
}
</script>
<ul>
<li onmouseover="tabChange(this,'tabcontent')" class="cli">1111</li>
<li onmouseover="tabChange(this,'tabcontent')">2222</li>
<li onmouseover="tabChange(this,'tabcontent')">3333</li>
<li onmouseover="tabChange(this,'tabcontent')">4444</li>
<li onmouseover="tabChange(this,'tabcontent')">5555</li>
<li onmouseover="tabChange(this,'tabcontent')">6666</li>
</ul>
</div>
<div id="tabcontent">
<ul name="tabul">
1111
</ul>
<ul class="hidden">
2222
</ul>
<ul class="hidden">
3333
</ul>
<ul class="hidden">
4444
</ul>
<ul class="hidden">
5555
</ul>
<ul class="hidden">
6666
</ul>
</div>
<div class="clearfloat"></div>
</div>
.tabbox {width:600px;height:300px; margin:0; padding:0; margin-bottom:50px; margin-top:50px;}
.tabmenu {width:px;height:28px;border-left:1px solid #CCC;border-top:1px solid #ccc;}
.tabmenu ul {margin:0;padding:0;list-style-type: none;}
.tabmenu li { text-align:center; float:left; display:block; width:80px; height:27px; overflow:hidden; background-color:#FF9826; line-height:27px; border-right:#ccc 1px solid; border-bottom:#ccc 1px solid; display:inline; font-size:12px;}
.tabmenu .cli {text-align:center;float:left;display:block;width:80px;height:27px;overflow:hidden;background-color: #fff;line-height:27px;border-right:#ccc 1px solid;border-bottom:#fff 1px solid;display:inline;font-size:12px; cursor:pointer;}
#tabcontent {width:600px; height:300px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}
#tabcontent ul {margin:0;padding:5px;list-style-type: none;}
#tabcontent .hidden {display:none;}
比如在下面再加一个div还是要实现这个效果,怎么修改代码才会不冲突???? 展开
2个回答
展开全部
很简单
<ul>
<li onmouseover="tabChange(this,'tabcontent2')" class="cli">1111</li>
<li onmouseover="tabChange(this,'tabcontent2')">2222</li>
<li onmouseover="tabChange(this,'tabcontent2')">3333</li>
<li onmouseover="tabChange(this,'tabcontent2')">4444</li>
<li onmouseover="tabChange(this,'tabcontent2')">5555</li>
<li onmouseover="tabChange(this,'tabcontent2')">6666</li>
</ul>
</div>
<div id="tabcontent2">
tabcontent2可以改成你自己需要的ID名称即可 不可与上面重名 因为ID是唯一的
js代码不需要更改 因为这里的id是由li 里面onmouseover传值进去的
<ul>
<li onmouseover="tabChange(this,'tabcontent2')" class="cli">1111</li>
<li onmouseover="tabChange(this,'tabcontent2')">2222</li>
<li onmouseover="tabChange(this,'tabcontent2')">3333</li>
<li onmouseover="tabChange(this,'tabcontent2')">4444</li>
<li onmouseover="tabChange(this,'tabcontent2')">5555</li>
<li onmouseover="tabChange(this,'tabcontent2')">6666</li>
</ul>
</div>
<div id="tabcontent2">
tabcontent2可以改成你自己需要的ID名称即可 不可与上面重名 因为ID是唯一的
js代码不需要更改 因为这里的id是由li 里面onmouseover传值进去的
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询