Question

我不确定如何做到这一点，但我想创建一个链接列表，滚动到同一页面上的各个锚点，每个链接都有不同的信息。但是，当点击链接时，我希望以某种方式突出显示相应的内容，以便明白要查看的内容。

<a href="1">LINK1</a>
<a href="2">LINK2</a>
<a href="3">LINK3</a>
<a href="4">LINK4</a>
<a href="5">LINK5</a>

<a name="1">INFORMATION1</a>
<a name="2">INFORMATION2</a>
<a name="3">INFORMATION3</a>
<a name="4">INFORMATION4</a>
<a name="5">INFORMATION5</a>

Answer 1

在最简单的级别，您只需在CSS中使用:target选择器。

演示：http://jsfiddle.net/abhitalks/Ya4xM/1/

使用id代替名称。
使用哈希标签。
理想情况下，不要将锚用于目标。使用任何元素。

HTML ：

<a href="#l1">Link 1</a>
<a href="#l2">Link 2</a>
...
<p id="l1">...</p>
<p id="l2">...</p>

CSS ：

p:target {
    background-color: yellow;
}

单击另一个链接后，样式会在目标更改时自动重置。您还可以使用CSS来获得有趣的效果，如黄色渐变。

演示2：http://jsfiddle.net/abhitalks/Ya4xM/3/

单击相应链接时更改单个内容样式

1 个答案: