全站通知:
切换标签
刷
历
编
阅读
2023-06-01更新
最新编辑:Akashi月白
阅读:
更新日期:2023-06-01
最新编辑:Akashi月白
跳到导航
跳到搜索
前言
- 当内容较多处于一个层级,平铺展现页面会特别长的时候,建议采用这种样式来展示内容,多用于图鉴或立绘切换。
- 本页面提供多个切换标签供大家使用,因为出自不同制作方功能上略有不同请酌情选用。
- 套娃:切换标签的内容部分还包含有切换标签。
- 同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
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>
效果:
样例2
语法:
<tabber> 关羽= {{#tag:tabber| 1111=2222 {{!}}-{{!}} 3333=4444 }} |-| 项羽=这里是2个 |-| 没雨=这里是3个 </tabber>
效果:
2222
4444
这里是2个
这里是3个