查看“模板:切换显示2/文档”的源代码

<h3>举例1</h3>
<pre>
{{切换显示2|
|选项1@@@=A
|选项2=B
|内容1@@@=A内容
|内容2=B内容
}}
</pre>
显示为：
{{切换显示2|
|选项1@@@=A
|选项2=B
|内容1@@@=A内容
|内容2=B内容
}}<br>
<h3>举例2</h3>
<pre>
{{切换显示2|active=$
|选项1$=A
|选项2=B
|内容1$=A内容
|内容2=B内容
}}
</pre>
显示为：
{{切换显示2|active=$
|选项1$=A
|选项2=B
|内容1$=A内容
|内容2=B内容
}}<br>
<h3>嵌套举例3</h3>
<pre>
{{切换显示2|active=$
|选项1$=A
|选项2=B
|内容1$=A内容
|内容2={{切换显示2|active=$
|选项1$=A1
|选项2=B1
|内容1$=A1内容
|内容2=B1内容
}}
}}
</pre>
显示为：
{{切换显示2|active=$
|选项1$=A
|选项2=B
|内容1$=A内容
|内容2={{切换显示2|active=$
|选项1$=A1
|选项2=B1
|内容1$=A1内容
|内容2=B1内容
}}
}}<br>
<h3>CSS样式</h3>
短信中常用的CSS样式，调用方式为
<pre>
{{对话CSS|对话选项=}}
</pre><br>
CSS样式说明
<syntaxhighlight lang="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;
}
</syntaxhighlight>
{{对话CSS|对话选项=}}