如何突出显示从单独网页链接到的文本？

Question

我有一个带有锚标签的网页，这些标签链接到另一个页面中的特定单词，其中仅包含单词。

单词页面中的每个单词都被一个<a> 锚标记包裹，该标记具有这样的唯一ID：

<a id="a">Капитанская</a>
<a id="b">дочкаБереги</a>
<a id="c">Капитанская</a>
<a id="d">дочкаБереги</a>

在网页中，有指向这些字词的链接，如下所示：

<a href="website.com/text-page.html#a">Капитанская</a>
<a href="website.com/text-page.html#b">дочкаБереги</a>

---

我需要找到一种方法来用彩色背景或类似的东西突出显示我链接的单词。

我在这两个网页上都使用 JavaScript、HTML、CSS 和 PHP，但无法使用其他任何东西。

Answer 1

在您的文本页面上，您可以使用window.location 只读属性中的hash 属性从您的url 中检索id，并为具有该ID 的文本元素分配背景颜色，如下所示：

//get the id from the URL
const link = window.location.hash.split('#')[1];

//add a class to the element that has that id
document.getElementById(link).classList.add('highlighted');

.highlighted {
  background-color: green; //add background color to that element
}

<a id="word1">word1</a>
<a id="word2">word2</a>
<a id="word3">word3</a>
<a id="word4">word4</a>
<a id="word5">word5</a>
<a id="word6">word6</a>
<a id="word7">word7</a>
<a id="word8">word8</a>

Answer 2

你可以使用 css

#wordid:target {
    background-color: #ddd;
    -webkit-transition: all 1s linear;
}