模板:切换显示2

模板信息

类型

模板

版本

稳定

描述

作者

未知作者

来源

tools

依赖

系列

更新

2024-05-02

示例

本页

快速安装/更新

从来源站点安装

快速安装说明

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

说明文档

举例1

{{切换显示2|
|选项1@@@=A
|选项2=B
|内容1@@@=A内容
|内容2=B内容
}}

显示为：

MediaWiki:SwitchBtn.js

A

B

A内容

B内容

举例2

{{切换显示2|active=$
|选项1$=A
|选项2=B
|内容1$=A内容
|内容2=B内容
}}

显示为：

A

B

A内容

B内容

嵌套举例3

{{切换显示2|active=$
|选项1$=A
|选项2=B
|内容1$=A内容
|内容2={{切换显示2|active=$
|选项1$=A1
|选项2=B1
|内容1$=A1内容
|内容2=B1内容
}}
}}

显示为：

A

B

A内容

A1

B1

A1内容

B1内容

CSS样式

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

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

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;
}

---

所有模板列表