查看“模板:Tab/文档”的源代码

<noinclude>{{面包屑|说明}}[[分类:说明]]</noinclude>
<!-- 简述模板作用 -->
快速创建可套娃的分页标签

==使用方法==
<!-- 简述使用方法 -->

===调用参数===
<!-- 填写模板用法 -->
<pre>{{Tab|标签名1=分页内容1|标签名2=分页内容2|……}}</pre>

===必填===
<!-- 必填参数项的说明，如没有可以留空或删除 -->
*标签名：标签名字
*分页内容：对应标签名的内容

===选填===
<!-- 选填参数项的说明，如没有可以留空或删除 -->
*多个标签名和内容

===注意===
<!-- 模板使用的注意事项 -->
*不论是否套娃，标签名字都不能重复

==默认样式==
<syntaxhighlight lang="css>
/* 模板:Tab样式 开始 */
/* 标签样式 */
.tab>ul>li {
    display: inline;
    border:1px solid #666;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    margin:0 3px;
    padding:3px;
    color:#666;
}
/* 鼠标指着标签 */
.tab>ul>li:hover {
    color:#666;
    font-weight:bold;
}
/* 激活的标签 */
.tab>ul>li.active {
    background:#666;
    color:#fff;
    font-weight:bold;
}
/* 内容样式 */
.tab>.tab-content {
    border:1px solid #666;
    margin:3px 15px 15px 15px;
    padding:15px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
/* 无需改动，保留即可 */
.tab>ul>li>a, .tab>ul>li>a:hover, .tab>ul>li>a:active, .tab>ul>li>a:focus {
    text-decoration:none;
    color:inherit;
}
.tab>ul>li.active>a, .tab>ul>li>a:hover,.tab>ul>li.active>a:active,.tab>ul>li.active>a:focus {
    color:inherit;
}
/* 模板:Tab样式 结束 */
</syntaxhighlight>

<syntaxhighlight lang="css>
/* 如需要标签在左列竖排，内容在右侧，那么在上面样式的基础上增加以下两条即可 */
.tab{
  display: flex;
  flex-direction: row;
}
.tab ul{
  display: flex;
  flex-direction: column;
}
</syntaxhighlight>

==示例1==
<!-- 模板使用示例 -->
===你所写的===
<pre>{{Tab
|第一个=第一个标签的内容
|另一个=另一个标签的内容
}}</pre>
===显示内容===
{{Tab
|第一个=第一个标签的内容
|另一个=另一个标签的内容
}}

==示例2==
<!-- 模板使用示例 -->
===你所写的===
<pre>{{Tab
|标签1=标签1对应内容
|标签2=标签2对应内容
|套娃=
  {{Tab
  |套娃1=套娃1对应内容
  |套娃2=套娃2对应内容
  }}
}}</pre>
===显示内容===
{{Tab
|标签1=标签1对应内容
|标签2=标签2对应内容
|套娃=
  {{Tab
  |套娃1=套娃1对应内容
  |套娃2=套娃2对应内容
  }}
}}

{{#css:
.tab>ul>li {
    display: inline;
    border:1px solid #666;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    margin:0 3px;
    padding:3px;
    color:#666;
}
/* 鼠标指着标签 */
.tab>ul>li:hover {
    color:#666;
    font-weight:bold;
}
/* 激活的标签 */
.tab>ul>li.active {
    background:#666;
    color:#fff;
    font-weight:bold;
}
/* 内容样式 */
.tab>.tab-content {
    border:1px solid #666;
    margin:3px 15px 15px 15px;
    padding:15px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
/* 无需改动，保留即可 */
.tab>ul>li>a, .tab>ul>li>a:hover, .tab>ul>li>a:active, .tab>ul>li>a:focus {
    text-decoration:none;
    color:inherit;
}
.tab>ul>li.active>a, .tab>ul>li>a:hover,.tab>ul>li.active>a:active,.tab>ul>li.active>a:focus {
    color:inherit;
}
}}