Html 实现CSS无线电检查以更改选项卡样式的正确方法是什么_Html_Css_Tabs_Radio Button

Html 实现CSS无线电检查以更改选项卡样式的正确方法是什么

html css tabs

Html 实现CSS无线电检查以更改选项卡样式的正确方法是什么,html,css,tabs,radio-button,Html,Css,Tabs,Radio Button,我正在为网页创建css选项卡式内容区域我已经创建了使用单选按钮更改内容的选项卡机制我不确定如何恰当地引用选中的单选按钮，并使用它来激活css样式，就像a:hover一样请看我的JSFIDLE，我已经包含了一个我希望它最终看起来像的链接，以及一个zip链接，如果你愿意，可以在本地运行它-这都在JS部分，因为我不使用JS 提前感谢您的帮助！我为这件事挠头已有一段时间了 CSS: 我的HTML： <body>  <

我正在为网页创建css选项卡式内容区域

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

我不确定如何恰当地引用选中的单选按钮，并使用它来激活css样式，就像a:hover一样

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

提前感谢您的帮助！我为这件事挠头已有一段时间了

CSS:

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


我们的产品和应用程序
鼠尾草产品
微软产品
第三方Sage插件
支持包
云产品

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

关键原则是，您需要使用

label

元素来更改当前选择的单选选项，方法是使用

for

属性链接到单个单选电台

id

然后，您可以使用收音机的

：checked

选择器切换选项卡样式以及选项卡可见性本身。但是，由于CSS只能以有限的方式遍历DOM，因此您需要调整HTML以实现这一点

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>

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

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