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

Question

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

words 页面 中的每个单词都包含一个 <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

你可以使用 css

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

Answer 2

在您的文本页面上，您可以使用 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>

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

How do I highlight text linked to from a separate webpage?

html

javascript

css

php

highlight