3

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

4

2 回答 2

1

您只能通过 CSS 来实现这一点，但只能使用重组的 HTML 和更丑陋的 CSS。

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

在这里，您应该将所有输入从它们的容器中移到它们将直接位于您希望它们影响的块之前的位置。~在这种情况下，您可以放置​​它，这样您就可以使用组合器和一些像这样的第 n 个子选择器来定位选项卡的父级及其内容：

#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 对应物那样可维护和可用。所以我建议仅将它们用于娱乐:)

于 2012-12-21T23:03:18.727 回答
0

CSS

.bgcolor1{

background-color:#blue;

}
.bgcolor2{

background-color:green;

}
.bgcolor3{

background-color:red;

}

查询

$('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>
于 2012-12-21T18:46:25.633 回答