html - 使用 :target 更改多个元素的 CSS

Question

好吧，基本上，我有 3 个链接，一些文本，然后是 3 个 div。 (例如:

<a href="#A">A</a><br/>
<a href="#B">B</a><br/>
<a href="#C">C</a><br/>
<p>Blah blah</p>
<div id="A">BlAh</div>
<div id="B">BlBh</div>
<div id="C">POMEGRANTE!</div>

现在，此时，您单击 A 并跳转到 A 等，它会突出显示由于 CSS 的 :target 选择器而选择的 div。但是，我还想在选择 div A 时突出显示链接 A(以与 div 不同的方式)。 Javascript 或 CSS 中是否有任何不需要需要奇怪和/或不稳定的解决方法的方法来做到这一点？

Answer 1

您可以在单击时为链接赋予“事件”类。这是一个使用 jQuery 的实现

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

Demo fiddle

还有一个原生的 Javascript:

var elems =document.getElementsByTagName("a");
for (var i = 0; i < elems.length; i++) {
        elems[i].addEventListener("click", function (e) {
                for (var i = 0; i < elems.length; i++) {
                    elems[i].className="";
                };
                this.className = "active";
        });
}