Question

我正在使用单选按钮仅从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/

Answer 1

您只能通过CSS实现此目的，但只能使用重组的HTML和更难看的CSS。

请看这个例子：http://jsfiddle.net/kizu/6KeTR/16/

在这里，您应该将所有输入从其容器中移出到它们将立即位于您希望它们影响的块之前的位置。在这种情况下，你放置它，这样你就可以使用~组合器以及一些像这样的n-child选择器来定位标签的父母及其内容：

#tab-1:checked ~ .content-container > .tab:first-child  > .content,
#tab-2:checked ~ .content-container > .tab:nth-child(2) > .content,
#tab-3:checked ~ .content-container > .tab:nth-child(3) > .content {}

但是，这类仅限CSS的东西更像是概念验证 - 它们不像JS对应物那样可维护和可用。因此，我建议仅将它们用于娱乐：）

Answer 2

CSS

.bgcolor1{

background-color:#blue;

}
.bgcolor2{

background-color:green;

}
.bgcolor3{

background-color:red;

}

JQUERY

$('input[name=radio-set1]:checked', '#main').addClass(bgcolor1)

$('input[name=radio-set2]:checked', '#main').addClass(bgcolor2)

$('input[name=radio-set5]:checked', '#main').addClass(bgcolor3)

HTML

 <input id="tab-1" type="radio" name="radio-set1" class="tab-selector" checked="checked"/>
 <input id="tab-2" type="radio" name="radio-set2" class="tab-selector" checked="checked"/>
 <input id="tab-3" type="radio" name="radio-set3" class="tab-selector" checked="checked"/>

<label class="bgcolor1" for="tab-1">Tab 1</label>
<label class="bgcolor2" for="tab-2">Tab 2</label>
<label class="bgcolor3" for="tab-3">Tab 3</label>

使用CSS选择器选择标签

2 个答案: