切换标签

丨前言

• 当内容较多处于一个层级，平铺展现页面会特别长的时候，建议采用这种样式来展示内容，多用于图鉴或立绘切换。
• 本页面提供多个切换标签供大家使用，因为出自不同制作方功能上略有不同请酌情选用。
• 套娃：切换标签的内容部分还包含有切换标签。
• 同id重复：在一个页面拥有复数的同一种切换写法。

比较	预制代码	自定义代码	支持自我套娃	支持同id重复	支持移动端
BWIKI预制	√	√	×（可与其他切换标签套娃）	√	√
tabber	√	×	√（需要使用#tag函数写法）	×	√

丨BWIKI预制切换标签

• 上手难度：低。该样式的js部分已经内嵌于BWIKI框架中，用户只需直接使用，修改标签内的内容即可。
• 不支持套娃（标签内再分标签），但是可以和其他切换标签的写法组合套娃，支持一个页面多个同样的标签。

语法

<div class="main-line-wrap">
<div class="resp-tabs">
<ul class="resp-tabs-list clearfix" style="margin:15px 5px">
<li class="active bili-list-style"><span class="tab-panel">标签1</span></li><!--默认第1个标签-->
<li class="bili-list-style" ><span class="tab-panel" >标签2</span></li><!--默认第2个标签-->
<li class="bili-list-style" ><span class="tab-panel" >标签n</span></li><!--默认第3个标签-->
<!--想添加更多标签,可以复制上面一行-->
</ul>
<div class="resp-tabs-container">
<div class="resp-tab-content" style="display:block"><!--默认第1个标签的内容-->
内容1111111111111111
</div>
<div class="resp-tab-content"><!--默认第2个标签的内容-->
内容2222222222222222
</div>
<div class="resp-tab-content"><!--默认第3个标签的内容-->
内容3333333333333333
</div>
<!--想添加更多标签,可以复制上面3行.注意标签数量和标签内容要一致-->
</div>
</div>
</div>

样例

• 标签1
• 标签2
• 标签n

内容1111111111111111

内容2222222222222222

内容3333333333333333

套娃修复代码

// 放入 common.js
(window.RLQ = window.RLQ || []).push([ ["mediawiki.extra.bili", "jquery"], function() {
    $(".resp-tabs .resp-tabs-list .bili-list-style").unbind("click").click(function() {
        $(this).addClass("active").siblings().removeClass("active");
        var e = $(this).index();
        $(this).parents(".resp-tabs").eq(0).children(".resp-tabs-container").children(".resp-tab-content").eq(e).show().siblings().hide(),
        $(".resp-accordion-handle").hide()
    })
 }]);

丨tabber

• WIKI插件提供的一种原生标签，不需要额外配置js和css代码。但是自定义样式较复杂，需要一定的代码基础。不支持套娃，不支持一个页面多个同id切换。
• 在Tabbers中无法进行节编辑。如果在Tabber中出现一个或多个节标题，请在该页面上使用__NOEDITSECTION__。
• 插件原址:https://www.mediawiki.org/wiki/Extension:Tabber
• 套娃写法需要使用 #tag 函数写法。

语法

• 标签的创建过程如下：<tabName> = <tabBody>
• 制表符之间用“ |-|”分隔

样例1

语法：

<tabber>
tab1=
一些简洁的文字
|-|
tab2=
谷歌[http://www.google.com Google] <br>
CNN[http://www.cnn.com Cnn] <br>
|-|
tab3 = 第三个标签内容
</tabber>

效果：

一些简洁的文字

谷歌Google
CNNCnn

第三个标签内容

样例2

语法：

<tabber>
关羽=
{{#tag:tabber|
1111=2222
{{!}}-{{!}}
3333=4444
}}
|-|
项羽=这里是2个
|-|
没雨=这里是3个
</tabber>

效果：

2222

4444

这里是2个

这里是3个