0

这只能由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 将是蓝色而不是红色,例如。

4

3 回答 3

3

你可以用 :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;

}

结果

于 2013-03-07T11:26:51.447 回答
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>

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

于 2013-03-07T11:55:20.703 回答
-1

您可以将兄弟选择器 ( ~) 与: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

于 2013-03-07T10:14:37.503 回答