Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Селекторы CSS

CSS псевдо-класс :target

Поддержка браузерами

12.0+ 9.0+ 3.5+ 4.0+ 9.6+ 3.2+

Описание

Псевдо-класс :target выбирает текущий целевой элемент на странице, то есть тот, к которому был осуществлён переход по ссылке внутри страницы.

Синтаксис

:target { свойства }

Пример:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Название веб-страницы</title>
  <style>
    .tab div { display: none; }
    .tab div:target { display: block; }
  </style>
</head>
<body>

  <div class="tab">
    <a href="#link1">Ссылка 1</a>
    <a href="#link2">Ссылка 2</a>
    <a href="#link3">Ссылка 3</a>

    <div id="link1">
      <h3>Содержимое по ссылке 1</h3>
      <p>Hello World!</p>
    </div>

    <div id="link2">
      <h3>Содержимое по ссылке 2</h3>
      <p>Привет Мир!!</p>
    </div>

    <div id="link3">
      <h3>Содержимое по ссылке 3</h3>
      <p>Ещё увидимся!</p>
    </div>
  </div>

</body>
</html>

Результат данного примера:

Ссылка 1 Ссылка 2 Ссылка 3

Содержимое по ссылке 1

Hello World!

Содержимое по ссылке 2

Привет Мир!!

Содержимое по ссылке 3

Ещё увидимся!

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru | ruen