切换标签

来自bilibili游戏中心 - WIKI
跳到导航 跳到搜索
页面贡献者 :
顾小满real
丘人头

说明

  • 当内容较多处于一个层级,平铺展现页面会特别长的时候,建议采用这种样式来展示内容,多用于图鉴或立绘切换。
  • 上手难度:低。该样式的js部分已经内嵌于BWIKI框架中,用户只需直接使用,修改标签内的内容即可。

示例

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

内容1

内容2

内容n

标准代码

<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>


其他样例

切换标签.png

  • 选择页签中的span中可以添加图片和文字元素,点击效果仍旧可以保留。
<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">[[文件:太刀.png|15px|link=]] 太刀</span></li>
<li class="bili-list-style" ><span class="tab-panel" >[[文件:双枪.png|15px|link=]] 双枪</span></li>
<li class="bili-list-style" ><span class="tab-panel" >[[文件:浮游炮.png|15px|link=]] 浮游炮</span></li>
<li class="bili-list-style" ><span class="tab-panel" >[[文件:弓.png|15px|link=]] 弓</span></li>
<li class="bili-list-style" ><span class="tab-panel" >[[文件:电锯.png|15px|link=]] 电锯</span></li>
<li class="bili-list-style" ><span class="tab-panel" >[[文件:大剑.png|15px|link=]] 大剑</span></li>
<li class="bili-list-style" ><span class="tab-panel" >[[文件:火炮.png|15px|link=]] 火炮</span></li>
<li class="bili-list-style" ><span class="tab-panel" >[[文件:短刀.png|15px|link=]] 短刀</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp-tab-content" style="display:block">
{{#ask:[[分类:武器]] [[武器类型::太刀]]
|?名称
|?稀有度
|?武器icon
|link=none
|sort=稀有度
|order=desc
|template=武器icon
|headers=hide
|format=template
|limit=1000
}}
</div>
<div class="resp-tab-content">
{{#ask:[[分类:武器]] [[武器类型::双枪]]
|?名称
|?稀有度
|?武器icon
|link=none
|sort=稀有度
|order=desc
|template=武器icon
|headers=hide
|format=template
|limit=1000
}}
</div>
<div class="resp-tab-content">
{{#ask:[[分类:武器]] [[武器类型::浮游炮]]
|?名称
|?稀有度
|?武器icon
|link=none
|sort=稀有度
|order=desc
|template=武器icon
|headers=hide
|format=template
|limit=1000
}}
</div>
<div class="resp-tab-content">
{{#ask:[[分类:武器]] [[武器类型::弓]]
|?名称
|?稀有度
|?武器icon
|link=none
|sort=稀有度
|order=desc
|template=武器icon
|headers=hide
|format=template
|limit=1000
}}
</div>
<div class="resp-tab-content">
{{#ask:[[分类:武器]] [[武器类型::电锯]]
|?名称
|?稀有度
|?武器icon
|link=none
|sort=稀有度
|order=desc
|template=武器icon
|headers=hide
|format=template
|limit=1000
}}
</div>
<div class="resp-tab-content">
{{#ask:[[分类:武器]] [[武器类型::大剑]]
|?名称
|?稀有度
|?武器icon
|link=none
|sort=稀有度
|order=desc
|template=武器icon
|headers=hide
|format=template
|limit=1000
}}
</div>
<div class="resp-tab-content">
{{#ask:[[分类:武器]] [[武器类型::火炮]]
|?名称
|?稀有度
|?武器icon
|link=none
|sort=稀有度
|order=desc
|template=武器icon
|headers=hide
|format=template
|limit=1000
}}
</div>
<div class="resp-tab-content">
{{#ask:[[分类:武器]] [[武器类型::短刀]]
|?名称
|?稀有度
|?武器icon
|link=none
|sort=稀有度
|order=desc
|template=武器icon
|headers=hide
|format=template
|limit=1000
}}
</div>
</div>
</div>
</div>