2021-10-07

做discuz模板时,应用到的js效果有很多,discuz原生原本就有一些常用的 js 特效,如幻灯片,TAB选项卡,因此discuz 原来就有的尽量不额外写,增加工作量和代码长度。这里说下tab选项卡。

 

选项:

 

 

<a href="javascript:;" id="sub_box_1" class="on">选项1</a>

<a href="javascript:;" id="sub_box_2">选项2</a>

<a href="javascript:;" id="sub_box_3">选项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。

打赏

好文章,更需要你的鼓励

本文由 氢设计 创作,除注明转载/出处外,均为本站原创,转载前请务必署名

最后编辑时间为:2021-11-23 10:21:01

本文链接:https://www.h2sheji.com/show-116.html