jQuery селектор :target

Определение и применение

Если идентификатор ресурса (URI) документа содержит фрагмент идентификатора элемента, то jQuery селектор :target выбирет элемент с подобным идентификатором (глобальный атрибут id). Например, элемент <p id = "info"> будет выбран так как URI документа (http://пример.ру/#info) содержит фрагмент идентификатора этого элемента.

jQuery синтаксис:

JavaScript

$(":target")

Добавлен в версии jQuery

1.9

Селектор в CSS

Обращаю Ваше внимание, что c помощью одноименного CSS псевдокласса target вы можете выбрать целевой элемент (#element_id).

Пример использования

Селектор :target — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<p>Нажмите на любую ссылку и обновите страницу:</p>
<p><a href="#test1">Перейти к абзацу №1</a></p>
<p><a href="#test2">Перейти к абзацу №2</a></p>
<p><a href="#test3">Перейти к абзацу №3</a></p>
<p id="test1"><b>Содержание абзаца №1</b></p>
<p id="test2"><b>Содержание абзаца №2</b></p>
<p id="test3"><b>Содержание абзаца №3</b></p>

main.js

JavaScript

$(document).ready(function () {
    $(':target').css('border', '1px solid red') // выбираем элементы, чей фрагмент идентификатора элемента содержится в URI документа
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery селектора :target выбираем и стилизуем элементы, чей фрагмент идентификатора элемента (глобальный атрибут id) содержится в URI документа