html - 在css中使用目标来保持颜色

Question

我在http://jsfiddle.net/uA97K/中有以下示例

我想要实现的是在选定选项卡上保持与悬停相同的颜色。因此，当用户单击一个选项卡时，该选定选项卡将保持蓝色，直到选择另一个选项卡。

我认为这可以通过使用 a:target 来完成，但看起来确实有效。

#bar a:target { background: #00A3EF; color: #003366;}

有什么想法我可能做错了吗？

Answer 1

仅使用 CSS，您无法做到这一点。但是你可以使用 jQuery 和一个 .active 类：http: //jsfiddle.net/uA97K/1/

$('#bar a').click(function(){
    $('.active').removeClass('active');
    $(this).addClass('active')
});

Answer 2

如前所述，这在目前的 CSS 中是不可能的。但是，使用纯 JavaScript 是可能的（尽管以下演示仅适用于支持 和 API 的浏览document.querySelector()器）addEventListener()：element.classList

function hashMonitor() {
    var D = document,
        active = D.querySelector('a.active'),
        link = D.querySelector('[href="#' + D.querySelector(':target').id + '"]');
    if (active) {
        active.classList.remove('active');
    }
    link.classList.add('active');
}
window.addEventListener('hashchange', hashMonitor, false);

JS 小提琴演示。

可以想象，在 CSS 的第 4 级（目前在野外完全不支持）下，这可能成为可能，但在实现出现之前，推测如何使用这种选择器似乎是徒劳的。

参考：

• CSS 选择器，第 4 级。
• document.querySelector().
• element.classList.
• EventTarget.addEventListener().