模板:Tab/文档

说明

{{Tab
|选项1=显示选项名
|选项<任意>=显示选项名
|内容1=显示内容
|内容<任意>=显示内容
}}

选项的显示方式为从上往下显示
内容和选项为上下一一对应，和编号无关

• 选项
  • 选项1：默认激活的选项
  • 选项<任意>：任意值，禁止同名(同名后者会覆盖前者，如写了两个选项B，则第2个选项B为生效，第1个被覆盖不存在)

• 内容
  • 内容1：默认激活的内容
  • 内容<任意>：任意值，禁止同名(同名后者会覆盖前者，如写了两个选项B，则第2个选项B为生效，第1个被覆盖不存在)

举例1

{{Tab
|选项1=A
|选项B=B
|内容1=A内容
|内容B=B内容
}}

显示为：

A

B

A内容

B内容

举例2

如果希望默认不激活按钮，则不写选项1
如果希望默认不显示内容，则不写内容1

{{Tab
|选项2=B
|内容2=B内容
}}

显示为：

B

B内容

嵌套举例3

{{Tab
|选项1=A
|选项B=B
|内容1=A内容
|内容B={{Tab
|选项2=BB
|内容2=BB内容
}}
}}

显示为：

A

B

A内容

BB

BB内容

CSS样式

短信中常用的CSS样式，调用方式为

{{对话CSS|对话选项=1}}

CSS样式说明

.BtnContent>.content {display: none;}
.BtnContent>.content.active {display: block;}
.SwitchContainer{text-align:center;}
.BtnContainer>.btn {<!--按钮默认状态-->
    width:80%;
    margin:5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 20px;
    border: 1px solid #736e7759;
    background-color:#dddddd54;
    color: #736e77;
    font-size: 14px;
}
.BtnContainer>.btn:hover {<!--按钮鼠标悬停状态-->
    color:#666;
    font-weight:bold;
}
.BtnContainer>.btn.active {<!--按钮激活状态-->
    color:#666;
    background-color:#ffffff54;
    border: 1px solid #736e77;
    font-weight:bold;
}