在CSS中，如果选项卡被选中(不使用javascript)，如何切换该选项卡颜色

Question

我需要切换选项卡标题的颜色，当它被选中。

我知道没有javascript是凝灰岩，但我需要它没有javascript。

我搜索了一下，但我无法从他们的问题中吸收出来。

这是我的CSS代码：

<style type="text/css">
#tabs-1,#tabs-2,#tabs-3,#tabs-4,#tabs-5,#tabs-6{
    min-height: 350px;
}

table{
border-collapse: separate;
}

table td {
    width: 195px;
}

table tr .td-label {
    text-align: left;
    height:25px; 
    width: 280px;
}

table h3 {
font-weight:bold;
color:#330066;
}

#tabs li{
background-color:orange;
}
#tabs li:hover{
background-color:white;
}

#tabs li[tabindex="0"] a {
    background-color:white;
}

</style>

这是我的HTML代码：

<div class="demo">
        <h2>Tab Details</h2>

        <div style="height: 20px;">
            <label style="font-size: 12px">${msg}</label>
        </div>
        <div id="tabs" style="width: 790px;">
            <ul>
                <li><a href="#tabs-1"><spring:message code="Tab1" /></a></li>
                <li><a href="#tabs-2"><spring:message code="Tab2" /></a></li>
                <li><a href="#tabs-3"><spring:message code="Tab3" /></a></li>
                <li><a href="#tabs-4"><spring:message code="Tab4" /></a></li>
                <li><a href="#tabs-5"><spring:message code="Tab5" /></a></li>
                <li><a href="#tabs-6"><spring:message code="Tab6" /></a></li>
            </ul>

            </div>
</div>

不使用javascript编码，切换选项卡颜色。

Answer 1

试一试

li[tabindex="0"] a{
  background-color:blue;
}

当前打开的选项卡具有属性tabindex="0"

所以我们li[tabindex="0"] a，我们使用li和包含a标签的tabindex="0"，改变它的背景色

所有其他选项卡都有属性tabindex="-1"。

参考文献

selectors