Select label using CSS selector

问题:

I'm using a radio button to create tabs from CSS only. The problem I'm running into is that I can't figure out how to select the <label> that references the radio button. I keep the labels separate from the content so that I can lay them out as tabs:

<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>

The content panes are layed out below. The input button is kept inside the content div so that I can select it when the label is clicked. But, I can't go in reverse:

<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>

What I'm trying to accomplish and my question for this issue would be: How can I change the label background color when the radio input is clicked given this layout?

I have provided a fiddle if you want to play with this live: http://jsfiddle.net/mjohnsonco/6KeTR/

回答1:

You can achieve this by CSS only, but only with restructured HTML and more ugly CSS.

Look at this example: http://jsfiddle.net/kizu/6KeTR/16/

Here you should move all the inputs out of their containers to the place where they would immediately precede the blocks you want them to affect. In that case, you place it so you could then target the parents of the tabs and their content using ~ combinator, and some nth-child selectors like this:

#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 {}

However, such CSS-only thingies are more like proof-of-concept — they are not that maintainable and usable as their JS counterparts. So I'd recommend using them only for fun :)

回答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>