全站通知:

切换标签

阅读

  ·  

2021-10-22更新

  ·  

最新编辑:顾小满real

阅读:

  

更新日期:2021-10-22

  

最新编辑:顾小满real

刷新 历史
编辑WIKI
来自bilibili游戏中心 - WIKI
跳到导航 跳到搜索
页面贡献者 :
顾小满real
丘人头
迦洛翎

说明

  • 当内容较多处于一个层级,平铺展现页面会特别长的时候,建议采用这种样式来展示内容,多用于图鉴或立绘切换。
  • 本页面提供多个切换标签供大家使用,因为出自不同制作方功能上略有不同请酌情选用。
  • 套娃:切换标签的内容部分还包含有切换标签。
  • 同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个标签的内容-->
内容1
</div>
<div class="resp-tab-content"><!--默认第2个标签的内容-->
内容2
</div>
<div class="resp-tab-content"><!--默认第3个标签的内容-->
内容n
</div>
<!--想添加更多标签,可以复制上面3行.注意标签数量和标签内容要一致-->
</div>
</div>
</div>

样例

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

内容1

内容2

内容n

作业

tabber

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

语法

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

样例1

语法:

<tabber>
tab1<!--页签上显示的文字-->=一些简洁的文字<!--tab1内容-->
|-|<!--分割-->
tab2=
[http://www.google.com Google] <br>
[http://www.cnn.com Cnn] <br>
|-|
 tab3 = {{Template:SomeTemplate}}
</tabber>

效果:

一些简洁的文字

样例2

语法:

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

效果:

2222

4444

这里是2个

这里是3个