dz论坛模板制作时DIY导致tab无法切换的解决方法

我们在进行dz 模板制作时，使用DIY功能去调用论坛中的不同版块的数据，由于DIY会自动增加外面的层，有时会导致某些模板的tab切换功能失效，也有的只会显示不会消失的情况。这是由于JS无法找到相应的节点。
224159shchoiabcbbozuah
解决DZ模板制作时TAB切换功能失效的方法就是用自己的代码结合目标网站的样式来替换。
第一步:修改TAB切换按钮。使用以下html代码代替(文字可以自己替换):

<ul>
<li id="two1" onMouSEOver="setTab(1)" class="on1">幼教</li>
<li id="two2" onMouseOver="setTab(2)">小学</li>
<li id="two3" onMouseOver="setTab(3)">初中</li>
<li id="two4" onMouseOver="setTab(4)">高中</li>
<li id="two5" onMouseOver="setTab(5)">大学</li>
</ul>

复制代码

第二步:将以下的JS代码放在以上的HTML代码的下面。

<script language="javascript">
<!--
function setTab(su){
for(i=1;i<=5;i++){
var menu=document.getElementById('two'+i);
menu.className = i==su?"on1":""; //三维运算来判断当前I是不是与SU相等，然后取值
var con=document.getElementById("con_"+i);
con.style.display = i==su?"block":"none";
}
}
//-->
</script>

复制代码

第三步:将内容版块使用以下的DZ代码替换。并且id="con_1" 需要不断的增加。如id="con_2"，id="con_3"……

<dl id="con_1" style="display: block;">
[loop]
<div class="fl phshuzi">{currentorder}</div><div class="phsz_r"><a href="{url}" title="{title}" target="_blank">{title}</a></div>
[/loop]
</dl>

复制代码

第四步:由于不同网站所使用的类名不一样，以上的代码需要结合自己的网站的类名进行修改，以达到自己需要的效果。

		自动登录	找回密码
密码			立即注册

dz论坛模板制作时DIY导致tab无法切换的解决方法-Discuz教程下载

dz论坛模板制作时DIY导致tab无法切换的解决方法

相关文章

全部评论 0

最佳新人

贡献之王

土豪装逼

管理/版主

教程 / CSS+DIV素材

discuz 帖子列表页调用封面图片代码24人阅读

【实测】Discuz更换域名，提示500错误或配置有误:由于权限不足而49人阅读

discuz 模板中使用方法和语言标签644人阅读

JavaScript或Jquery中多个输入字段的Onkeyup事件？579人阅读

HTML中限制input 输入框输入内容及onkeyup的多个判断过滤842人阅读

【原创】分享一款html5+css3的四排图文资讯列表DIY模块（百分百147人阅读

【转载】垂直时光轴HTML单页+CSS+js模块836人阅读

【转载】文字由左向右循环滚动DIY+CSS+js模块883人阅读

【原创】左侧导航栏样式，点击展开一级分类二级分类的DIY+CSS+JS3638人阅读

【原创】discuz论坛首页四格，幻灯片+文字列表切换功能DIY+CSS+j5570人阅读

所属版块