使用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選擇器選擇標籤

回答

相關問題