css - 如何将事件选项卡更改为第一个 css

Question

代码如下:

.tabs {
 float: right;
 position: relative; 
 min-height: 140px;
 margin: 25px 0;
 width: 500px;
}
.tab {
 float: left;
}
.tab label {
 background: #eee; 
 padding: 10px; 
 border: 1px solid #ccc; 
 margin-left: -1px; 
 position: relative;
 left: 1px; 
}
.tab [type=radio] {
 display: none; 
}
.content {
 position: absolute;
 top: 28px;
 left: 0;
 background: white;
 right: 0;
 bottom: 0;
 padding: 20px;
 border: 1px solid #ccc; 
}
[type=radio]:checked ~ label {
 background: white;
 border-bottom: 1px solid white;
 z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
 z-index: 1;
}

HTML 结构:

<div class="tabs">
 <div class="tab">
 <input type="radio" id="tab-1" name="tab-group-1" checked>
 <label for="tab-1">Tab-1</label>
 <div class="content">
 bla-bla1
 </div>
 </div>

 <div class="tab">
 <input type="radio" id="tab-2" name="tab-group-1" checked>
 <label for="tab-2">Tab-2</label>
 <div class="content">
 bla-bla2
 </div>
 </div>

 </div>

此代码使第二个选项卡处于事件状态。但我需要第一个标签。我真的不明白我应该改变什么属性。所有选项卡的代码结构都相同，只是“id”属性不同。如果我添加第三个选项卡，第三个选项卡将处于事件状态。

Answer 1

给你: Fiddle

HTML:

 <input type="radio" id="tab-2" name="tab-group-1" /> // remove checked

说明:因为您已检查属性应用于两个输入。