html - 链接处于活动状态时突出显示标题

Question

这只能由css完成吗？当 ID1 链接处于活动状态时，我希望突出显示 H1。

<a href=#id1>ID1</a>
<a href=#id1>ID2</a>
<h1 id="id1">This is the header</h1>
<h1 id="id2">This is the header</h1>

因此，如果 ID1 链接处于活动状态，则 ID 为“id1”的 H1 将是蓝色而不是红色，例如。

Answer 1

你可以用 :target 做到这一点

当 URL 中的哈希值和元素的 id 相同时，CSS 中的 :target 伪选择器匹配。

<a href=#id1>ID1</a>
<a href=#id2>ID2</a>
<h1 id="id1">This is the header</h1>
<h1 id="id2">This is the header</h1>

和CSS

:target{
    color:red;

}

和结果

Answer 2

上面的帖子是正确的，还有一个更正，因为它适用于悬停。

单击后使用javascript将CLASS =“活动”添加到元素，可以说

h1.active{
   color:red;
   font-weight:bold
}

点击链接后 Html 将有 class="active"

<a id=a1 href=#id1 onclick="javascript:getElementById('id1').className='active'">ID1</a>
<a id=a2 href=#id1 onclick="javascript:getElementById('id2').className='active'">ID2</a>
<h1 id="id1" class="">This is the header</h1>
<h1 id="id2" class="">This is the header</h1>

我希望这可能会有所帮助:)

Answer 3

您可以将兄弟选择器 ( ~) 与:active状态结合使用。如this fiddle所示。

#id1-ref:active ~ #id1 {
    color: #FF0000;
}

#id2-ref:active ~ #id2 {
    color: #0000FF;
}

不过，您确实必须向锚标签添加额外的 ID。

编辑

找到了一个很好的方法来做目标。这可能会更好：http: //jsfiddle.net/Wolfy87/5M8vV/2/

h1:target {
    color: #FF0000;
}

选择器的信息:target。