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链接处于活动状态，那么H1为id＆＃34; id1＆＃34;将是蓝色而不是红色，例如。

Answer 1

您可以使用：target

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

<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;

}

和RESULT

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

Information on the :target selector.

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

3 个答案:

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

修改