html - 更改链接到 radio 的选定 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;
}