javascript - 通过单击链接突出显示另一页的元素

Question

我有两个 HTML 文档，home.html 和 courses.html
home.html 有 4 个链接，每个链接代表(链接)到 courses.html

上的代码(div)的一部分 我想要的: 当点击 home.html 上的链接时，它会被重定向到 courses.html< 的特定部分/em> 然后该部分应该发光(可能通过框阴影)以吸引读者的注意力。 home.html(rough view)

courses.html(roughly showing effect I want)

PS:我只是一个初学者，我只会 HTML、CSS、Javascript，所以如果使用这些语言可以实现这种效果，那将是非常棒的。如果没有，那么请让我理解该代码。
谢谢

Answer 1

您可以使用 :target第二页中预期部分的伪类。请注意， anchor 名称(# 后的散列)与目标元素 ID 相同。

该示例适用于单个页面，但原理也适用于 2 个或更多页面。

div:target {
  border: 2px solid pink;
}

<!-- source page -->
<a href="#section1">Go to 1</a>
<a href="#section2">Go to 2</a>
<a href="#section3">Go to 3</a>
<a href="#section4">Go to 4</a>

<!-- target page -->
<div id="section1">Example 1</div>
<div id="section2">Example 2</div>
<div id="section3">Example 3</div>
<div id="section4">Example 4</div>