discuz 默认js tab选项卡
做模板有时用的js效果太多,系统有的尽量不额外写。
选项:
<a href="javascript:;" id="sub_box_1" class="on" onclick="switchTab('sub_box',1,3,'on');">选项1</a>
<a href="javascript:;" id="sub_box_2" onclick="switchTab('sub_box',2,3,'on');">选项2</a>
<a href="javascript:;" id="sub_box_3" onclick="switchTab('sub_box',3,3,'on');">选项3</a>
复制代码
容器:
<div class="List-item-box" id="sub_box_c_1">内容1</div>
<div class="List-item-box" id="sub_box_c_2" style="display:none">内容2</div>
<div class="List-item-box" id="sub_box_c_3" style="display:none">内容3</div>
复制代码
第一个选项加选中class、第一个容器不隐藏。
都是针对id的,class随意。
onclick="switchTab('sub_box',1,3,'on');"分解:
sub_box,序号前的名称;
1,当前顺序;
3,总数;
on,选中时选项卡增加的class。
选项:
<a href="javascript:;" id="sub_box_1" class="on" onclick="switchTab('sub_box',1,3,'on');">选项1</a>
<a href="javascript:;" id="sub_box_2" onclick="switchTab('sub_box',2,3,'on');">选项2</a>
<a href="javascript:;" id="sub_box_3" onclick="switchTab('sub_box',3,3,'on');">选项3</a>
复制代码
容器:
<div class="List-item-box" id="sub_box_c_1">内容1</div>
<div class="List-item-box" id="sub_box_c_2" style="display:none">内容2</div>
<div class="List-item-box" id="sub_box_c_3" style="display:none">内容3</div>
复制代码
第一个选项加选中class、第一个容器不隐藏。
都是针对id的,class随意。
onclick="switchTab('sub_box',1,3,'on');"分解:
sub_box,序号前的名称;
1,当前顺序;
3,总数;
on,选中时选项卡增加的class。
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
热门教程
discuz电脑版、手机版去除标题title中的PoweredbyDisc2018-12-27
Discuz 触屏手机版支持视频播放的方法2018-12-27
discuz手机版支持视频播放的修改方法2018-12-27
Discuz! 程序 X3.2、X3.3升级3.4教程2018-12-27
discuz X3以及X3.4论坛搬家完美详细教程2019-01-02
怎么开启手机版2018-12-25
去掉Discuz论坛底部的Powered 等版权信息2018-12-27
discuz! x3.4插件位置DZ论坛X3版本插件在哪个文件夹?2018-12-26
Mysql修改端口号后织梦dedecms的修改方法2018-12-27
Discuz!X3.2论坛实现全站HTTPS终极方法教程2018-12-28