我使用单选按钮仅从 CSS 创建选项卡。我遇到的问题是我不知道如何选择<label>
引用单选按钮的。我将标签与内容分开,以便我可以将它们布置为选项卡:
<div class="tab-labels">
<label for="tab-1">Tab 1</label>
<label for="tab-2">Tab 2</label>
<label for="tab-3">Tab 3</label>
</div>
内容窗格如下所示。输入按钮保留在内容 div 中,以便在单击标签时可以选择它。但是,我不能反过来:
<div class="content-container">
<div class="tab details">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector" checked="checked"/>
<div class="content">
<p>Some content 1</p>
</div>
</div>
<div class="tab details">
<input id="tab-2" type="radio" name="radio-set" class="tab-selector"/>
<div class="content">
<p>Some content 2</p>
</div>
</div>
<div class="tab details">
<input id="tab-3" type="radio" name="radio-set" class="tab-selector"/>
<div class="content">
<p>Some content 3</p>
</div>
</div>
</div>
我想要完成的事情以及我对这个问题的问题是:如何在给定此布局的情况下单击单选输入时更改标签背景颜色?
如果您想现场演奏,我提供了一个小提琴:http: //jsfiddle.net/mjohnsonco/6KeTR/