模板:DTab

Tab页，依赖Widget:TabJS，模板:切换标签是使用此JS的另一种语法模式

语法：

{{DTab
|标题=内容
|标题=内容
|...
|标题=内容
}}

在只有一个标题内容时，支持隐藏内容，此时等价于折叠展开模板

目标HTML结构：

<div class="d-tab {{{class}}}">
  <div class="d-tab-titles">
    <span class="d-tab-title active">title</span>
    <span class="d-tab-title">title</span>
    <span class="d-tab-title">title</span>
  </div>
  <div class="d-tab-contents">
    <div class="tab-content active">content</div>
    <div class="tab-content hidden">content</div>
    <div class="tab-content hidden">content</div>
  </div>
</div>

只要遵循此格式，Widget:TabJS即可支持。

基础使用

{{DTab
|【asd】=123123
|a2=2222
|《a3》=4344
}}

【asd】a2《a3》

123123

支持更复杂的标题格式，比如配合CSS和图片

{{DTab
|class=lianzhan
|<div>[[File:Stacks.svg|48px|link=]]<span>Stacks</span></div> = 内容：Stacks
|<div>[[File:Palette.svg|48px|link=]]<span>Palette</span></div> = 内容：Palette
}}

Stacks

Palette

内容：Stacks

配合CSS和图片，加间隔符号

{{DTab
|class=lianzhan
|delimiter=[[File:Code.svg|20px|link=]]
|<div>[[File:Stacks.svg|48px|link=]]<span>不净</span></div> = 内容：不净不净不净
|<div>[[File:Stacks.svg|48px|link=]]<span>不空</span></div> = 内容：不空不空不空不空
|<div>[[File:Stacks.svg|48px|link=]]<span>不能</span></div> = 内容：不能不能不能不能不能
|<div>[[File:Stacks.svg|48px|link=]]<span>不白</span></div> = 内容：不白不白不白不白不白不白
}}

不净

不空

不能

不白

不净

不空

不能

不白

内容：不净不净不净