无需JavaScript：实现CSS切换按钮在iframe打开不同URL

核心思路 #

用HTML checkbox的:checked伪类记录状态，配合label模拟按钮外观，隐藏的a标签负责触发iframe请求，全程纯CSS+HTML实现。

完整代码示例 #

CSS 样式

/* 隐藏原生复选框和触发请求的a标签 */
.toggle-checkbox {
  display: none;
}
.toggle-btn a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
}

/* 按钮基础样式 */
.toggle-btn {
  position: relative;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
}

/* 未选中时：显示"turn on"按钮，颜色为深紫 */
.toggle-checkbox:not(:checked) + .toggle-btn.on {
  background-color: #7A1473;
}
.toggle-checkbox:not(:checked) ~ .toggle-btn.off {
  display: none;
}

/* 选中时：显示"turn off"按钮，颜色为明黄 */
.toggle-checkbox:checked + .toggle-btn.on {
  display: none;
}
.toggle-checkbox:checked ~ .toggle-btn.off {
  background-color: #FFCC00;
}

/* 隐藏iframe，满足需求 */
#iframe-target {
  display: none;
}

HTML 结构

<iframe name="iframe-target" id="iframe-target"></iframe>

<div class="toggle-container">
  <input type="checkbox" id="toggle-switch" class="toggle-checkbox">
  <label for="toggle-switch" class="toggle-btn on">
    turn on
    <a href="/?cmd=turn_on" target="iframe-target"></a>
  </label>
  <label for="toggle-switch" class="toggle-btn off">
    turn off
    <a href="/?cmd=turn_off" target="iframe-target"></a>
  </label>
</div>

工作逻辑 #

1. 隐藏的checkbox负责记录当前状态（开/关），用户看不到它，但点击关联的label会切换它的选中状态
2. 两个label作为按钮的可见外观，根据checkbox的checked状态，CSS会控制只显示其中一个
3. 每个label里的透明a标签覆盖整个按钮区域，点击时会触发对应的URL请求到iframe，用户感知不到这个a标签的存在
4. iframe默认隐藏，完全符合你后续隐藏的需求

内容的提问来源于stack exchange，提问作者adrianTNT