Как выделить текст, связанный с отдельной веб-страницей?

Question

У меня есть веб-страница с тегами привязки, которые связаны с определенными c словами на другой странице, содержащей только слова.

Каждое отдельное слово на странице words является обернутый <a> тегом привязки с уникальным идентификатором, подобным этому:

<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

На вашей текстовой странице вы можете просто извлечь id из вашего URL-адреса, используя свойство hash из свойства window.location только для чтения, и назначить цвет фона текстовому элементу, который имеет такой идентификатор, как это:

//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;
}