如何无需JS点击单个label同时激活两个单选框实现页签高亮？

解决方案 #

你想通过单个label同时激活两个单选按钮的思路不符合HTML规范，单个label的for属性仅允许关联唯一一个表单元素，无需设置两组单选框，仅用一组单选框就可以同时实现页签高亮和对应内容展示的需求，调整后的实现代码如下：

完整HTML代码

<div class="tab-wrapper">
  <!-- 仅保留一组单选框，全部隐藏，作为状态切换的唯一数据源 -->
  <input type="radio" name="tab" id="tab1" checked>
  <input type="radio" name="tab" id="tab2">
  <input type="radio" name="tab" id="tab3">

  <div class="tabs">
    <label for="tab1">First Tab</label>
    <label for="tab2">Second Tab</label>
    <label for="tab3">Third Tab</label>
  </div>
  <div class="pages">
    <div class="page page1">Page Content #1</div>
    <div class="page page2">Page Content #2</div>
    <div class="page page3">Page Content #3</div>
  </div>
</div>

完整CSS代码

/* 隐藏所有单选框 */
input[name="tab"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.tabs {
  display: flex;
}

.tabs > label,
.pages {
  padding: 10px;
  background-color: #eee;
  border: 1px solid #ddd;
}

.tabs > label {
  border-bottom: none;
  border-right-width: 0;
}

.tabs > label:last-child {
  border-right-width: 1px;
}

/* 选中状态的页签高亮 */
#tab1:checked ~ .tabs label[for="tab1"],
#tab2:checked ~ .tabs label[for="tab2"],
#tab3:checked ~ .tabs label[for="tab3"] {
  background-color: green;
}

.pages > .page {
  display: none;
}

/* 选中状态的对应内容展示 */
#tab1:checked ~ .pages .page1,
#tab2:checked ~ .pages .page2,
#tab3:checked ~ .pages .page3 {
  display: block;
}

实现说明

• 所有单选框放在公共父容器最顶部，作为状态管理的唯一来源，通过label的for属性关联切换选中状态
• 利用CSS兄弟选择器~，匹配到选中的单选框后，同时定位到对应的页签label和页面内容，分别应用高亮和显示样式
• 无冗余DOM元素，兼容所有现代浏览器，完全不需要引入JavaScript

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