纯CSS实现多Tabs容器冲突问题求助（附完整代码）

嘿，我一眼就发现了两个核心问题，正是它们导致了多个Tabs容器的冲突：

1. 单选按钮分组冲突 #

你的所有单选按钮都用了同一个name="tabs"属性！单选按钮是通过name来划分分组的——同一页面里，同名的单选按钮会被视为同一组，选了其中一个就会自动取消其他组里的选中状态，这就是多个Tabs互相干扰的根本原因。

2. 重复的ID违反HTML规范 #

你的input元素和对应的content元素用了相同的ID（比如tabs1-01同时用在input和div上），HTML要求页面内所有ID必须唯一，这种重复可能会引发潜在的兼容性问题，比如JS选择元素出错、样式匹配异常等。

修复后的完整代码 #

HTML（修正分组和ID重复问题） #

<div class="tabs-container" id="tabs1">
  <input checked="" id="tabs1-01" type="radio" name="tabs-group-1">
  <label for="tabs1-01">Hier een tab</label>
  <input id="tabs1-02" type="radio" name="tabs-group-1">
  <label for="tabs1-02">Nog een tab</label>
  <!-- 修改content的ID，避免和input重复 -->
  <div class="content" id="tabs1-content-01"><p>Tab 01</p></div>
  <div class="content" id="tabs1-content-02"><p>Tab 02</p></div>
</div>
<div class="tabs-container" id="tabs2">
  <input checked="" id="tabs2-01" type="radio" name="tabs-group-2">
  <label for="tabs2-01">Hier een tab</label>
  <input id="tabs2-02" type="radio" name="tabs-group-2">
  <label for="tabs2-02">Nog een tab</label>
  <div class="content" id="tabs2-content-01"><p>Tab 01</p></div>
  <div class="content" id="tabs2-content-02"><p>Tab 02</p></div>
</div>

CSS（优化选择器，支持现有Tabs容器） #

.tabs-container input { display : none; }
.tabs-container label { 
  display : inline-block; 
  border : 1px solid transparent; 
  margin : 0 0 -1px; 
  padding : 5px 15px; 
  font-size : 17px; 
  font-weight : 600; 
  text-align : center; 
}
.tabs-container label:hover { color : #0094cc; cursor : pointer; }
.tabs-container input:checked + label { 
  border : 1px solid #e0dede; 
  border-top : 2px solid #0094cc; 
  border-bottom : 1px solid #FFFFFF; 
  color : #4f4d4d; 
}
.tabs-container .content { 
  display: none; 
  border-top : 1px solid #e0dede; 
  border-bottom : 1px solid #e0dede; 
}
/* 匹配每个Tabs容器内的选中状态与对应内容 */
.tabs-container input[id^='tabs1']:checked ~ .content[id^='tabs1-content'],
.tabs-container input[id^='tabs2']:checked ~ .content[id^='tabs2-content'] {
  display: block;
}

进阶优化（可选，支持无限扩展） #

如果以后要添加更多Tabs容器，每次修改CSS会很麻烦，你可以用自定义数据属性让CSS完全通用，不用再修改样式代码：

优化后的HTML #

<div class="tabs-container">
  <input checked="" id="tab-1-1" type="radio" name="tabs-group-1">
  <label for="tab-1-1">Hier een tab</label>
  <input id="tab-1-2" type="radio" name="tabs-group-1">
  <label for="tab-1-2">Nog een tab</label>
  <!-- 用data-tab-target关联对应的input ID -->
  <div class="content" data-tab-target="tab-1-1"><p>Tab 01</p></div>
  <div class="content" data-tab-target="tab-1-2"><p>Tab 02</p></div>
</div>
<div class="tabs-container">
  <input checked="" id="tab-2-1" type="radio" name="tabs-group-2">
  <label for="tab-2-1">Hier een tab</label>
  <input id="tab-2-2" type="radio" name="tabs-group-2">
  <label for="tab-2-2">Nog een tab</label>
  <div class="content" data-tab-target="tab-2-1"><p>Tab 01</p></div>
  <div class="content" data-tab-target="tab-2-2"><p>Tab 02</p></div>
</div>

优化后的CSS（完全通用，无需修改） #

.tabs-container input { display : none; }
.tabs-container label { 
  display : inline-block; 
  border : 1px solid transparent; 
  margin : 0 0 -1px; 
  padding : 5px 15px; 
  font-size : 17px; 
  font-weight : 600; 
  text-align : center; 
}
.tabs-container label:hover { color : #0094cc; cursor : pointer; }
.tabs-container input:checked + label { 
  border : 1px solid #e0dede; 
  border-top : 2px solid #0094cc; 
  border-bottom : 1px solid #FFFFFF; 
  color : #4f4d4d; 
}
.tabs-container .content { 
  display: none; 
  border-top : 1px solid #e0dede; 
  border-bottom : 1px solid #e0dede; 
}
/* 通用匹配：选中的input对应的content */
.tabs-container input:checked ~ .content[data-tab-target=''] {
  display: block;
}

这样不管你添加多少个Tabs容器，都不用修改CSS，只要保证每个容器内的radio name唯一，content的data-tab-target对应input的ID就可以了。

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