1

我需要在选择选项卡标题颜色时切换它。
我知道没有 javascript 是凝灰岩，但我需要没有 javascript。
我在 SO 中进行了搜索，但我无法从他们的问题中吸收它。

这是我的 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 编码的情况下切换选项卡颜色。

4

1 回答 1

2

尝试

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

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

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

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

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

于 2013-09-19T09:27:40.503 回答