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

演示小提琴

还有一个原生的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";
        });
}

Answer 2

我想你也可以这样做..

$('div').click(function(){
    $('a').css('color','');
 $('a[href=#'+$(this).attr("id")+']').css('color','red');
})

给你：http: //jsfiddle.net/f4FF4/6/