切换标签

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


说明

  • 当内容较多处于一个层级,平铺展现页面会特别长的时候,建议采用这种样式来展示内容,多用于图鉴或立绘切换。
  • 本页面提供多个切换标签供大家使用,因为出自不同制作方功能上略有不同请酌情选用。
  • 套娃:切换标签的内容部分还包含有切换标签。
  • 同id重复:在一个页面拥有复数的同一种切换写法。
比较 预制代码 自定义代码 支持套娃 支持同id重复 支持移动端
BWIKI预制 ×
tabber × × ×
Tab.js(玩家自制-金书群侠传)

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

作业

切换标签.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>

tabber

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

语法

  • 标签的创建过程如下:<tabName> = <tabBody>
  • 制表符之间用“ |-|”分隔
<tabber>
tab1<!--页签上显示的文字-->=一些简洁的文字<!--tab1内容-->
|-|<!--分割-->
tab2=
[http://www.google.com Google] <br>
[http://www.cnn.com Cnn] <br>
|-|
 tab3 = {{Template:SomeTemplate}}
</tabber>

样例

一些简洁的文字

Tab.js(玩家自制-碧蓝航线)

  • 需要预制内容到自己的WIKI里(界面管理员权限),源代码见碧蓝航线版

Tab.js(玩家自制-金书群侠传)

  • 需要预制内容到自己的WIKI里(界面管理员权限),源代码见金书群侠传版

使用说明

  • 在自己的WIKI上创建MediaWiki:Tab.js页面(需要界面管理员权限),将如下代码保存到页面中。
function bindTab()
{
	//侦听点击事件
	$('.TabContainer').each(function(){
		$(this).on("click", "ul .tab_li", function () {
			var index = $(this).index();
			var $con = $(this).parent().siblings(".tab_con");
			$(this).addClass('active').siblings().removeClass('active');
			$con.removeClass('active').eq(index).addClass('active');
		})
	})
}
$(bindTab);

语法

<div class="TabContainer">
<ul>
<li class="tab_li active">第一个页签</li>
<li class="tab_li">第二个页签</li>
<li class="tab_li">第三个页签</li><br>
<li class="tab_li">第四个页签</li>
<li class="tab_li">第五个页签</li>
<li class="tab_li">第六个页签</li>
</ul>
<div class="tab_con active" style="position:relative;overflow:hidden">
第一个页签内容
</div>
<div class="tab_con" style="position:relative;overflow:hidden">
第二个页签内容
</div>
<div class="tab_con" style="position:relative;overflow:hidden">
第三个页签内容
</div>
<div class="tab_con" style="position:relative;overflow:hidden">
第四个页签内容
</div>
<div class="tab_con" style="position:relative;overflow:hidden">
第五个页签内容
</div>
<div class="tab_con" style="position:relative;overflow:hidden">
第六个页签内容
</div>
</div>