Question

我使用单选按钮技巧制作标签

HTML

<div class="tabs">
   <input type="radio" id="tab-1" name="tab-group-1" checked>
   <label for="tab-1">Tab One</label>
   <input type="radio" id="tab-2" name="tab-group-1">
   <label for="tab-2">Tab Two</label> 
</div>

然后css：

.tabs label {
   margin-left: -1px;
   border: 1px solid;
   padding: 0px 80px 0px 80px;
   background: #ddd;
}

.tabs input[type=radio]:checked ~ .tabs label {
   background: #fff;
   border-bottom: 1px solid #fff;
}

这里的问题是选择单选按钮时标签的样式不会改变。任何人都可以帮我解释一下，谢谢

btw：我使用IE 8运行代码。它是否支持已检查的属性

Answer 1

检查以下是解决方案。将~替换为+。

.tabs label {
   margin-left: -1px;
   border: 1px solid;
   padding: 0px 80px 0px 80px;
   background: #ddd;
}

input[type="radio"]:checked + label {
   background: #fff;
   border-bottom: 1px solid #fff;
}

<div class="tabs">
    <input type="radio" id="tab-1" name="tab-group-1" checked>
   <label for="tab-1">Tab One</label>
       <input type="radio" id="tab-2" name="tab-group-1"/>
   <label for="tab-2">Tab Two</label> 
</div>

Answer 2

删除tilde (~)符号并替换为+和.tabs

.tabs input[type=radio]:checked + label {

Answer 3

你也可以制作一个jQuery方法：

$('.tabs input[type="radio"]').click(function() {

   if($('#tab-1').is(':checked')) { 
       $('#tab-1').addClass("someClass")
   }

});

单选按钮组检查属性css错误

3 个答案: