查看“模板:Test”的源代码

{{JS|SwitchBtn.js}}
<div class="SwitchContainer">
<div class="BtnContainer">
<div class="btn active">aaa</div> <!-- 默认显示的按钮 -->
<div class="btn">b</div>
<div class="btn">c</div>
</div>
<div class="BtnContent">
<div class="content active">a11</div> <!-- 默认显示的内容 -->
<div class="content">b22</div>
<div class="content">

<div class="SwitchContainer">
<div class="BtnContainer">
<div class="btn active">aaa</div> <!-- 默认显示的按钮 -->
<div class="btn">b</div>
<div class="btn">c</div>
</div>
<div class="BtnContent">
<div class="content active">a11</div> <!-- 默认显示的内容 -->
<div class="content">b22</div>
<div class="content">c33</div>
</div>
</div>

</div>
</div>
</div>
{{#CSS:
.BtnContainer .btn {
    width:20%;
    padding: 10px 20px;
    margin: 5px;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.BtnContainer .btn:hover {
    background-color: #ddd;
}

.BtnContainer .btn.active {
    background-color: #bbb;
}

.BtnContent .content {
    display: none;
}

.BtnContent .content.active {
    display: block;
}
}}