请教!跪求!div切换问题？

Loop-break 2011-07-08 11:27:34
有两个index_border怎么悬浮到第一个的显示正常，悬浮到第二个index_border的时候第一个切换而不是第二个呢？
<div class="index_border">
<script>
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
if(menu == null || con == null)continue;
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
<div id="Tab1">
<div class="Menubox" style="background-color:#5B5B5B;">
<ul>
<li id="one1" onMouseOver="setTab('one',1,2)" class="hover"><a href="bieshu.asp"><font size="-1" style="font-family:'幼圆'; font-weight:bold;color:#FFFFFF;">别墅装修</font></a></li>
<li id="one2" onMouseOver="setTab('one',2,2)" ><a href="meirong.asp"><font size="-1" style="font-family:'幼圆';font-weight:bold; color:#FFFFFF;">美容院装修</font></a></li>
</ul>
</div>
<div class="Contentbox">
<div id="con_one_1" class="hover">
<ul class="tab_ul">

<li>
<a href="newsshow.asp?id=969" target="_blank">·
郑州别墅装修美丽要加密
</a>
<span>2011-6-10</span>
</li>
</ul>
</div>
<div id="con_one_2" style="display:none">
<ul class="tab_ul">
<li>
<a href="newsshow.asp?id=976" target="_blank">·
美容院设计细节
</a>
<span>2011-6-13</span>
</li>

<li>
<a href="newsshow.asp?id=972" target="_blank">·
美容院设计的中国风
</a>
<span>2011-6-11</span>
</li>

</ul>
</div>
</div>
</div>
<div id="Tab2">
<div class="Menubox" style="background-color:#5B5B5B;">
<ul>
<li id="two1" onMouseOver="setTab('two',1,4)" class="hover"><a href="jiudian.asp"><font size="-1" style="font-family:'幼圆'; font-weight:bold;color:#FFFFFF;">酒店装修</font></a></li>
<li id="two2" onMouseOver="setTab('two',2,4)" ><a href="wangba.asp"><font size="-1" style="font-family:'幼圆'; font-weight:bold;color:#FFFFFF;">网吧装修</font></a></li>
</ul>
</div>
<div class="Contentbox">
<div id="con_two_1" class="hover">
<ul class="tab_ul">


<li>
<a href="newsshow.asp?id=974" target="_blank">·
酒店设计的古朴美
</a>
<span>2011-6-12</span>
</li>

</ul>
</div>
<div id="con_two_2" style="display:none">
<ul class="tab_ul">
<li>
<a href="newsshow.asp?id=983" target="_blank">·
网吧装修要做到的
</a>
<span>2011-6-20</span>
</li>

</ul>
</div>
</div>
</div>
<div id="Tab3">
<div class="Menubox" style="background-color:#5B5B5B;">
<ul>
<li id="three1" onMouseOver="setTab('three',1,4)" class="hover"><a href="bangongshi.asp"><font size="-1" style="font-family:'幼圆'; font-weight:bold;color:#FFFFFF;">办公室装修</font></a></li>
<li id="three2" onMouseOver="setTab('three',2,4)" ><a href="xiuxian.asp"><font size="-1" style="font-family:'幼圆'; font-weight:bold;color:#FFFFFF;">休闲会所装修</font></a></li>
</ul>
</div>
<div class="Contentbox">
<div id="con_three_1" class="hover">
<ul class="tab_ul">

<li>
<a href="newsshow.asp?id=1010" target="_blank">·
做好办公室设计这个前提
</a>
<span>2011-7-5</span>
</li>
</div>
<div id="con_three_2" style="display:none">
<ul class="tab_ul">

<li>
<a href="newsshow.asp?id=982" target="_blank">·
郑州酒吧装修其设计的重要性
</a>
<span>2011-6-19</span>
</li>

</ul>
</div>
</div>
</div>

</div>

</div>

<div class="index_border">
<script>
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
if(menu == null || con == null)continue;
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}

</script>
<div id="Tab1">
<div class="Menubox" style="background-color:#5B5B5B;">
<ul>
<li id="one1" onMouseOver="setTab('one',1,2)" class="hover"><a href="bieshu.asp"><font size="-1" style="font-family:'幼圆'; font-weight:bold;color:#FFFFFF;">别墅装修</font></a></li>
<li id="one2" onMouseOver="setTab('one',2,2)" ><a href="meirong.asp"><font size="-1" style="font-family:'幼圆';font-weight:bold; color:#FFFFFF;">美容院装修</font></a></li>
</ul>
</div>
<div class="Contentbox">
<div id="con_one_1" class="hover">
<ul class="tab_ul">
<li>
<a href="newsshow.asp?id=969" target="_blank">·
郑州别墅装修美丽要加密
</a>
<span>2011-6-10</span>
</li>
</ul>
</div>
<div id="con_one_2" style="display:none">
<ul class="tab_ul">


<li>
<a href="newsshow.asp?id=976" target="_blank">·
美容院设计细节
</a>
<span>2011-6-13</span>
</li>
</ul>
</div>
</div>
</div>


<div id="Tab2">
<div class="Menubox" style="background-color:#5B5B5B;">
<ul>
<li id="two1" onMouseOver="setTab('two',1,4)" class="hover"><a href="jiudian.asp"><font size="-1" style="font-family:'幼圆'; font-weight:bold;color:#FFFFFF;">酒店装修</font></a></li>
<li id="two2" onMouseOver="setTab('two',2,4)" ><a href="wangba.asp"><font size="-1" style="font-family:'幼圆'; font-weight:bold;color:#FFFFFF;">网吧装修</font></a></li>
</ul>
</div>
<div class="Contentbox">
<div id="con_two_1" class="hover">
<ul class="tab_ul">
<li>
<a href="newsshow.asp?id=974" target="_blank">·
酒店设计的古朴美
</a>
<span>2011-6-12</span>
</li>
</ul>
</div>
<div id="con_two_2" style="display:none">
<ul class="tab_ul">
<li>
<a href="newsshow.asp?id=977" target="_blank">·
网吧设计要有的元素
</a>
<span>2011-6-14</span>
</li>
</ul>
</div>
</div>
</div>
<div id="Tab3">
<div class="Menubox" style="background-color:#5B5B5B;">
<ul>
<li id="three1" onMouseOver="setTab('three',1,4)" class="hover"><a href="bangongshi.asp"><font size="-1" style="font-family:'幼圆'; font-weight:bold;color:#FFFFFF;">办公室装修</font></a></li>
<li id="three2" onMouseOver="setTab('three',2,4)" ><a href="xiuxian.asp"><font size="-1" style="font-family:'幼圆'; font-weight:bold;color:#FFFFFF;">休闲会所装修</font></a></li>
</ul>
</div>
<div class="Contentbox">
<div id="con_three_1" class="hover">
<ul class="tab_ul">
<li>
<a href="newsshow.asp?id=1004" target="_blank">·
办公室装修要的感觉
</a>
<span>2011-7-1</span>
</li>
</ul>
</div>
<div id="con_three_2" style="display:none">
<ul class="tab_ul">
<li>
<a href="newsshow.asp?id=982" target="_blank">·
郑州酒吧装修其设计的重要性
</a>
<span>2011-6-19</span>
</li>

</ul>
</div>
</div>
</div>

</div>

</div>
...全文
136 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhongwei11 2011-07-08
  • 打赏
  • 举报
 回复
//动态加载选项卡
function TabShow(c_className, n_className, itemPrefix, obj, index) {
if (obj.className == c_className) return;
var tabList = obj.parentNode.getElementsByTagName(obj.tagName);
for (i = 0; i < tabList.length; i++) {
if (i == index) {
obj.className = c_className;
document.getElementById(itemPrefix + i).style.display = 'block';
} else {
tabList[i].className = n_className;
document.getElementById(itemPrefix + i).style.display = 'none';
}
}
}

给你一段js自己琢磨琢磨 参数说明：
c_className：选中时的样式名称,
n_className：未选中时的样式名称,
itemPrefix：元素id前缀，如：有个div的id=show_1那么它的前缀就是show_ ,
obj:当前对象,
index：索引值，即表示选中的是第几个选项卡。
哦来混的 2011-07-08
  • 打赏
  • 举报
 回复
xx相当厉害
lsw645645645 2011-07-08
  • 打赏
  • 举报
 回复
有点乱啊
狄默默斯基 2011-07-08
  • 打赏
  • 举报
 回复
代码太多了，头疼
孟子E章 2011-07-08
  • 打赏
  • 举报
 回复
没样式，看不到实际的效果
浏览器兼容问题
本文深入探讨了Firefox与IE浏览器在集合类对象、HTML对象获取、常量定义、事件处理、帧操作等方面存在的兼容性问题，并提供了相应的解决策略。包括集合类对象获取、HTML对象ID获取、const关键字使用、window.event处理、事件对象属性、frame对象访问与内容切换、body元素可见性、事件委托、父元素获取、cursor样式、innerText与textContent、样式设置、table标签操作、padding设置、列表样式、CSS透明与圆角、双线凹凸边框、select选项操作、XMLHTTP区别、宽度与padding计算、CSShack与!important声明、IE专用条件注释、div垂直居中、cursor样式、链接样式、浮动div布局、BOX模型解释差异、关键代码实现等。
three.js在同一个div下切换不同模型挂载的问题
该博客围绕three.js在同一个div下切换不同模型挂载展开。需求是通过查询不同设备展示不同模型，实现时遇到问题，如旧模型未清除、新模型追加后多个canvas叠加。经思考，找到清除模型对象的方法，但canvas始终存在。最后探讨了删除dom子节点的方法及canvas未被删除的原因。
css div层 切换,JS+DIV+CSS实现的经典标签切换效果代码
本文介绍了一种使用JS、DIV和CSS实现的标签切换效果，即滑动门效果，通过具体代码展示了如何创建这种布局效果。
Vue过渡动画之tabbar切换div动画实战采坑
本文介绍如何在Vue项目中实现页面切换的过渡动画效果，详细解释了使用transition组件结合CSS动画，实现从右向左的过渡动画，包括解决过程中遇到的问题如滚动条、div位置等。
html5div中页面的转换,JS+DIV+CSS实现的经典标签切换效果代码
本文介绍了一种使用JavaScript、DIV和CSS实现的标签切换效果，即滑动门效果，并提供了完整的代码示例及在线演示地址。
JavaScript

87,990

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章