模板:Tab

> 模板 > 模板:Tab

短•刷•阅•编•历

模板信息

类型

模板

版本

稳定

描述

快速创建可套娃的分页标签

作者

马小萌

来源

tools

依赖

系列

更新

2024-06-12

示例

查看示例

快速安装/更新

从来源站点安装

快速安装说明

模板：[刷新此页面] [编辑] [页面历史]
文档：[查看] [编辑] [页面历史]

说明文档

快速创建可套娃的分页标签

使用方法

调用参数

{{Tab|标签名1=分页内容1|标签名2=分页内容2|……}}

必填

• 标签名：标签名字
• 分页内容：对应标签名的内容

选填

• 多个标签名和内容

注意

• 不论是否套娃，标签名字都不能重复

默认样式

/* 模板: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样式 结束 */

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

示例1

你所写的

{{Tab
|第一个=第一个标签的内容
|另一个=另一个标签的内容
}}

显示内容

• 第一个
• 另一个

第一个标签的内容

另一个标签的内容

示例2

你所写的

{{Tab
|标签1=标签1对应内容
|标签2=标签2对应内容
|套娃=
  {{Tab
  |套娃1=套娃1对应内容
  |套娃2=套娃2对应内容
  }}
}}

显示内容

• 标签1
• 标签2
• 套娃

标签1对应内容

标签2对应内容

• 套娃1
• 套娃2

套娃1对应内容

套娃2对应内容

---

所有模板列表