实现 CSS Radio Checked 以更改选项卡样式的正确方法是什么答案

【问题标题】：What is the correct way to implement CSS Radio Checked to change styling of tabs实现 CSS Radio Checked 以更改选项卡样式的正确方法是什么
【发布时间】：2017-04-27 07:10:15
【问题描述】：

我正在为网页创建一个 CSS 选项卡式内容区域。

我已经创建了使用单选按钮更改内容的选项卡机制。

我不确定如何正确引用选中的单选按钮并使用它来激活 CSS 样式，就像 :hover 一样。

请查看我的 JSFiddle，我已经包含了一个我希望它最终看起来像的链接，以及一个 zip 链接，如果你愿意，你可以在本地运行它 - 这一切都在 JS 部分中，因为我不使用 JS。

http://jsfiddle.net/AirCombat/eBUWL/

提前感谢您的帮助！一段时间以来，我一直在摸不着头脑。

CSS：

    /* My CSS */
/* Global */ 
*   {
    font-family: 'Open Sans', "Helvetica Neue", helvetica, arial, sans-serif;
}
a   {
    text-decoration: none;
} 

 /* Classes */
 .clear {
    clear: both;
}

/* Pages */

/* Product Tabs */

.tabs {
    width: 750px;
}

.productTabs input {
    position: absolute;
    width: 120px;
    height: 40px;

    z-index: 1000;
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}


.productTabs label {
    position: relative;
    left: 40px;
    float: left;
    width: 132px;
    height: 150px;
    display: block;
    margin: 0 5px 0 0;
    color: black;
}

.productTabLabel1 {
    z-index: 6;
    background-image: url('http://example.com/jsfiddle/img/tab1.jpg');
}

.productTabLabel1:hover {
    z-index: 6;
    background-image: url('http://example.com/jsfiddle/img/tab1selected.jpg');
}

.productTabLabel2 {
    z-index: 5;
    background-image: url('http://example.com/jsfiddle/img/tab2.jpg');
}

.productTabLabel2:hover {
    z-index: 5;
    background-image: url('http://example.com/jsfiddle/img/tab2selected.jpg');
}

.productTabLabel3 {
    z-index: 4;
    background-image: url('http://example.com/jsfiddle/img/tab3.jpg');
}

.productTabLabel3:hover {
    z-index: 4;
    background-image: url('http://example.com/jsfiddle/img/tab3selected.jpg');
}

.productTabLabel4 {
    z-index: 3;
    background-image: url('http://example.com/jsfiddle/img/tab4.jpg');
}

.productTabLabel4:hover{
    z-index: 3;
    background-image: url('http://example.com/jsfiddle/img/tab4selected.jpg');
}

.productTabLabel5 {
    z-index: 2;
    background-image: url('http://example.com/jsfiddle/img/tab5.jpg');
}

.productTabLabel5:hover {
    z-index: 2;
    background-image: url('http://example.com/jsfiddle/img/tab5selected.jpg');
}

.productTabLabel6 {
    z-index: 1;
    background-image: url('http://example.com/jsfiddle/img/tab6.jpg');
}

.productTabLabel6:hover {
    z-index: 1;
    background-image: url('http://example.com/jsfiddle/img/tab6selected.jpg');
}

 .clear {
    clear: both;
}

.tabContent {
    background: #ddd;
    position: relative;
    width: 900px;
    min-height: 100px;
    z-index: 10;
}

.tabContent div {
    position: absolute;
    top: 0;
    left: 0;   //makes all tabs content appear in same place

    z-index: 1;
    opacity: 0;  //Makes content invisivble when not selected

    -webkit-transition: opacity linear 0.1s;
    -moz-transition: opacity linear 0.1s;
    -o-transition: opacity linear 0.1s;
    -ms-transition: opacity linear 0.1s;
    transition: opacity linear 0.1s;
}

.productTabs input.productTabRadio1:checked ~ .tabContent .tabContent1,
.productTabs input.productTabRadio2:checked ~ .tabContent .tabContent2,
.productTabs input.productTabRadio3:checked ~ .tabContent .tabContent3,
.productTabs input.productTabRadio4:checked ~ .tabContent .tabContent4,
.productTabs input.productTabRadio5:checked ~ .tabContent .tabContent5,
.productTabs input.productTabRadio6:checked ~ .tabContent .tabContent6{
    z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;

    -webkit-transition: opacity ease-out 0.2s 0.1s;
    -moz-transition: opacity ease-out 0.2s 0.1s;
    -o-transition: opacity ease-out 0.2s 0.1s;
    -ms-transition: opacity ease-out 0.2s 0.1s;
    transition: opacity ease-out 0.2s 0.1s;
}

我的 HTML：

<body>
<!-- Tabs -->
            <div class="content">               
                <div class="productTabs">
<!-- Tabs Label / Buttons -->
                    <input id="productTab1" type="radio" name="radio-set" class="productTabRadio1" checked="checked" />
                    <label for="productTab1" class="productTabLabel1"></label>

                    <input id="productTab2" type="radio" name="radio-set" class="productTabRadio2" />
                    <label for="productTab2" class="productTabLabel2"></label>

                    <input id="productTab3" type="radio" name="radio-set" class="productTabRadio3" />
                    <label for="productTab3" class="productTabLabel3"></label>

                    <input id="productTab4" type="radio" name="radio-set" class="productTabRadio4" />
                    <label for="productTab4" class="productTabLabel4"></label>

                    <input id="productTab5" type="radio" name="radio-set" class="productTabRadio5" />
                    <label for="productTab5" class="productTabLabel5"></label>

                    <input id="productTab6" type="radio" name="radio-set" class="productTabRadio6" />
                    <label for="productTab6" class="productTabLabel6"></label>

                    <div class="clear">&nbsp;</div>
<!-- Tabs Content -->
                    <div class="tabContent">
                        <div class="tabContent1">
                            <h2>Our Products and Apps</h2>
                        </div>
                        <div class="tabContent2">
                            <h2>Sage Products</h2>
                        </div>
                        <div class="tabContent3">
                            <h2>Microsoft Products</h2>
                        </div>
                        <div class="tabContent4">
                            <h2>3rd Party Sage Addons</h2>
                        </div>
                        <div class="tabContent5">
                            <h2>Support Packages</h2>
                        </div>
                        <div class="tabContent6">
                            <h2>Cloud Products</h2>
                        </div>
                    </div>
                </div>
            </div>
</body>

【问题讨论】：

标签： html css tabs radio-button

【解决方案1】：

有大量潜在的方法，我只在下面概述一种。

关键原则是您需要使用label 元素来更改当前选择的收音机选项，通过使用for 属性链接到单个收音机id。

然后，您可以使用收音机的:checked 选择器来切换标签样式以及标签本身的可见性。但是，由于 CSS 只能以有限的方式遍历 DOM，因此您需要调整您的 HTML 以适应这种情况。

Demo Fiddle

HTML

<div id='wrapper'>
    <div>
        <input type='radio' name='content' id='tab1Content' checked='true' />
        <label for='tab1Content'>Tab 1</label>
        <div>Tab 1 content</div>
    </div>
    <div>
        <input type='radio' name='content' id='tab2Content' />
        <label for='tab2Content'>Tab 2</label>
        <div>Tab 2 content</div>
    </div>
    <div>
        <input type='radio' name='content' id='tab3Content' />
        <label for='tab3Content'>Tab 3</label>
        <div>Tab 3 content</div>
    </div>
</div>

CSS

label {
    padding: 10px 15px;
    background: #f2f2f2;
    color: #4D4D4D;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}
#wrapper {
    position:relative;
}
#wrapper > div {
    float:left;
    margin-right:10px;
}
input[name=content] {
    display:none;
}
input[name=content]~div {
    display:none;
    overflow:hidden;
    position:absolute;
    top:40px;
    left:0;
}
input[name=content]:checked~div {
    display:block;
}
input[name=content]:checked~label {
    background:lightblue;
}

【讨论】：