查看“︁模板:Click-switch”︁的源代码

<includeonly>
<div class="click-switch-container" style="display: inline-block; position: relative;">
  <!-- 添加了id必填检查 -->
  {{#if: {{{id|}}}
    | <input type="checkbox" id="click-switch-{{{id}}}" class="click-switch-checkbox" style="display: none;">
    | <strong style="color:red">错误：未提供id参数!</strong>
  }}
  
  <label for="click-switch-{{{id|}}}" style="cursor: pointer;">
    <span class="click-switch-text1">{{{text1|默认文本1}}}</span>
    <span class="click-switch-text2">{{{text2|默认文本2}}}</span>
  </label>
</div>

<style>
/* 初始状态隐藏text2 */
.click-switch-text2 { display: none; }

/* 选中状态显示text2，隐藏text1 */
#click-switch-{{{id|}}}:checked ~ .click-switch-text1 { display: none; }
#click-switch-{{{id|}}}:checked ~ .click-switch-text2 { display: inline; }
</style>
</includeonly>