我在http://jsfiddle.net/uA97K/中有以下示例
我想要实现的是在选定选项卡上保持与悬停相同的颜色。因此,当用户单击一个选项卡时,该选定选项卡将保持蓝色,直到选择另一个选项卡。
我认为这可以通过使用 a:target 来完成,但看起来确实有效。
#bar a:target { background: #00A3EF; color: #003366;}
有什么想法我可能做错了吗?
我在http://jsfiddle.net/uA97K/中有以下示例
我想要实现的是在选定选项卡上保持与悬停相同的颜色。因此,当用户单击一个选项卡时,该选定选项卡将保持蓝色,直到选择另一个选项卡。
我认为这可以通过使用 a:target 来完成,但看起来确实有效。
#bar a:target { background: #00A3EF; color: #003366;}
有什么想法我可能做错了吗?
仅使用 CSS,您无法做到这一点。但是你可以使用 jQuery 和一个 .active 类:http: //jsfiddle.net/uA97K/1/
$('#bar a').click(function(){
$('.active').removeClass('active');
$(this).addClass('active')
});
如前所述,这在目前的 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);
可以想象,在 CSS 的第 4 级(目前在野外完全不支持)下,这可能成为可能,但在实现出现之前,推测如何使用这种选择器似乎是徒劳的。
参考: