单页面两组CSS Tab默认选中异常，如何仅用CSS实现各自独立选中

你碰到的问题其实很好解决——核心原因是两个Tab组里的单选框（radio）用了一模一样的name属性。浏览器会把所有同名的radio归为一组，同一组里只能有一个选项被选中，所以才会出现两组Tab共享选中状态的情况。

纯CSS完全能实现两组Tab各自独立维护选中状态，只需要改一个小地方：

• 给每个Tab组内的单选框设置唯一的name值，让它们属于不同的互斥分组。

下面是修改后的完整代码：

修改后的HTML代码 #

<div class="tabs m-tab">
 <input id="about-m" type="radio" name="tabs-m" checked="checked">
 <label for="about-m">About Me</label>
 <input id="profile-m" type="radio" name="tabs-m">
 <label for="profile-m">Profile</label>
 <input id="typical-m" type="radio" name="tabs-m">
 <label for="typical-m">Typical Day</label>
 <div class="tab-info" id="m-about">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do ore magna aliqua labo ris nisi ut aliquip ex ea commodo consequat.</p>
 </div>
 <div class="tab-info" id="m-profile">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua labo ris nisi ut aliquip ex ea commodo consequat.</p>
 </div>
 <div class="tab-info" id="m-typical">
 <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua labo ris nisi ut aliquip ex ea commodo consequat.</p>
 </div>
</div>
<div class="tabs p-tab">
 <input id="about-p" type="radio" name="tabs-p" checked="checked">
 <label for="about-p">About Me</label>
 <input id="profile-p" type="radio" name="tabs-p">
 <label for="profile-p">Profile</label>
 <input id="typical-p" type="radio" name="tabs-p">
 <label for="typical-p">Typical Day</label>
 <div class="tab-info" id="p-about">
 <p>Hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
 </div>
 <div class="tab-info" id="p-profile">
 <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 </div>
 <div class="tab-info" id="p-typical">
 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 </div>
</div>

CSS代码（无需修改） #

.m-tab, .p-tab { display:inline-block; width:400px; height:450px; }
.tab-info { display:none; padding:10px; border-top:1px solid #abc; }
.tabs input { display:none; }
.tabs label { display:inline-block; margin:0 0 -1px; padding:15px 25px; font-weight:600; text-align:center; color: rgb(134, 206, 155); border: 1px solid transparent; }
.tabs label:hover { color:rgb(47, 187, 89); cursor:pointer; }
.tabs input:checked + label { color:rgb(2, 163, 51); border:1px solid #abc; border-top:3px solid rgb(27, 190, 76); border-bottom:1px solid #fff; }
#about-m:checked ~ #m-about, #profile-m:checked ~ #m-profile, #typical-m:checked ~ #m-typical, #about-p:checked ~ #p-about, #profile-p:checked ~ #p-profile, #typical-p:checked ~ #p-typical { display: block; }

原理说明 #

• 单选框的name属性是分组的核心：同一name的radio会构成一个互斥组，同一时间只能有一个选项被选中。
• 把第一个Tab组的radioname设为tabs-m，第二个组设为tabs-p，它们就变成了两个完全独立的互斥组，各自的选中状态不会再互相干扰。
• 你的CSS逻辑是通过id关联单选框和对应内容块，所以不需要修改任何CSS代码，只调整HTML的name属性就能解决问题。

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