更改鏈接到無線電的選定CSS選項卡的背景圖像

Question

我正在嘗試使用css-tricks.com的CSS選項卡技術並使其適應我的需要。 http://css-tricks.com/functional-css-tabs-revisited/

我希望每個選項卡都顯示它自己的背景圖像，以及選擇特定選項卡時該選項卡所獨有的不同背景圖像。

HTML：

<div class="tabs">     
    <div class="productTab"> 
     <input type="radio" id="tab1" name="tabgroup1" checked> 
     <label for="tab1" id="productTabLabel1">Tab One</label> 
     <div class="productTabContent"> 
      stuff0 
     </div> 
    </div> 
    <div class="productTab"> 
     <input type="radio" id="tab2" name="tabgroup1"> 
     <label for="tab2" id="productTabLabel2">Tab Two</label>  
     <div class="productTabContent"> 
      stuff1 
     </div> 
    </div> 
</div> 

CSS：

.tabs { 
    position: relative; 
    min-height:200px; 
    clear: both; 
} 

.productTab { 
    float: left; 
    width: 132px; 
    height: 164px; 
} 

.productTab [type=radio] { 
    display: none; 
} 

.productTab label{ 
    /*background: #eee;*/ 
    border: 1px solid #ccc; 
    position: relative; 
    left: 1px; 
    margin-left: -1px; 

} 

.productTabContent { 
    background: #229FE8; 
    border: 1px solid #ccc; 
    position: absolute; 
    top: 28px; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

/*Changes the style of the selected Label and brings it to the front*/ 
[type=radio]:checked ~ label { 
    background: white; 
    border-bottom: 1px solid white; 
    z-index: 2; 
} 

/*Brings the content adjacent to the label to the front*/ 
[type=radio]:checked ~ label ~ .productTabContent { 
    z-index: 1; 
} 

#productTabLabel1 { 
    background-image: url('../img/products1.jpg'); 
} 

#productTabLabel2 { 
    background-image: url('../img/products2.jpg'); 
} 

我有另一個問題是，標籤不增長甚至顯示背景圖像時，我指定它們的尺寸，雖然它可能是一些明顯我將在後面認識到。

Answer 1

我認爲您的部分對於「標籤」的實際形式存在誤解。

這不是label ......它是一類.productTab的div。

我已經清除了一點額外的CSS，並改變了一些顏色，所以你可以看到發生了什麼。

JSfiddle Demo

CSS

.tabs { 
    position: relative; 
    min-height:200px; 
    clear: both; 
} 

.productTab { 
    float: left; 
    width: 132px; 
    height: 164px; 
    //background-color: red; 
    border-radius:5px; 
    padding:5px; 
} 

.productTab [type=radio] { 
    display: none; 
} 

.productTab label{ 
    /*background: #eee;*/ 
    //border: 1px solid #ccc; 
    position: relative; 
    left: 1px; 
    margin-left: -1px; 

} 

.productTabContent { 
    background: #229FE8; 
    //border: 1px solid #ccc; 
    position: absolute; 
    top: 28px; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

/*Changes the style of the selected Label and brings it to the front*/ 
[type=radio]:checked ~ label { 
    //background: white; 
    //border-bottom: 1px solid white; 
    z-index: 2; 
} 

/*Brings the content adjacent to the label to the front*/ 
[type=radio]:checked ~ label ~ .productTabContent { 
    z-index: 1; 
} 

.productTabLabel1 { 
    //background-image: url('../img/products1.jpg'); 
    background-color: #bada55; 
} 

.productTabLabel2 { 
    //background-image: url('../img/products2.jpg'); 
    background-color: #663399; 
}