Question

中有以下示例

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

我认为这可以通过使用：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可以实现（尽管以下演示仅适用于支持document.querySelector()，addEventListener()和element.classList API的浏览器：

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

可以想象，在CSS的第4级（目前完全不支持）这个可能成为可能，但在实现出现之前，推测似乎毫无结果如何使用这样的选择器。

参考文献：

在css中使用target来保持颜色

2 个答案: