Html 在css中使用目标保持颜色

我有下面的例子

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

我认为这可以通过使用：target来实现，但看起来确实有效

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

---

你知道我做错了什么吗？

只有CSS，你就做不到。但您可以使用jQuery和.active类：

---

如前所述，这在CSS中是不可能的。但是，可以使用普通JavaScript（尽管以下演示仅适用于支持

document.querySelector（）

、

addEventListener（）

和

元素.classList

API的浏览器）：

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

参考资料：

---

嗯，这有点难<代码>：目标仅适用于具有目标ID的元素，而不适用于具有指向该目标的链接的元素。我不知道有一个选择器会应用于后者（在本例中是所选选项卡）。为什么不在单击时更改颜色？

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

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