使用CSS选择器选择标签

我正在使用单选按钮仅从CSS创建选项卡。我遇到的问题是我无法弄清楚如何选择引用单选按钮的<label>。我将标签与内容分开，以便我可以将它们排列为制表符：使用CSS选择器选择标签

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

内容窗格放在下面。输入按钮保存在content 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/

来源

2012-12-21 Michael D Johnson

纯粹的CSS解决方案？没有机会。您的标签和表单元素与当前可用的选择器之间可以建立任何关系。 – cimmanon

@cimmanon：不完全正确。根据浏览器的支持，他要求他可以使用属性选择器：'label [for =“tab-1”] {/ * rules * /}'也就是说，他没有办法将无线电的状态与状态的标签，所以你是正确的:-) – prodigitalson

有一个CSS技巧的例子，与你的主要区别是他们有每个相关的单选按钮旁边的每个标签，而不是在另一个div，希望它可以帮助： http://css-tricks.com/examples/CSSTabs/radio.php –

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>

来源

2012-12-21 18:46:25 underscore

谁对jQuery有什么评论？ – BoltClock

你认为用CSS可以吗？从来没有根据我的知识 – underscore

，因为我们知道我们不能选择使用css选择的单选按钮 – underscore

你只能通过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-21 23:03:18 kizu

使用CSS选择器选择标签

回答

相关问题