0

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

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

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

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

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

4

2 回答 2

1

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

$('#bar a').click(function(){
    $('.active').removeClass('active');
    $(this).addClass('active')
});
于 2013-05-22T09:48:37.597 回答
1

如前所述,这在目前的 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 级(目前在野外完全不支持)下,这可能成为可能,但在实现出现之前,推测如何使用这种选择器似乎是徒劳的。

参考:

于 2013-05-22T10:02:19.223 回答