CSS: интерфейс вкладок

Языки

Это перевод. Здесь могут содержаться ошибки или страница может быть устаревшей по отношению к Английской версии. Переводчик: Евгений Скрипец (Address-Data)

Смотрите также указатель всех приёмов работы.

На этой странице:

Селектор :target
Элемент вкладка
Признательность

Псевдокласс ':target'

URL (унифицированный указатель ресурса) обычно указывает на страницу. Но если URL оканчивается на "#что-то", тогда он указывает на определенный элемент на данной странице. Браузеры обычно стараются убедиться, что целевой элемент виден и, если это возможно, расположен в верхней части экрана.

С помощью селектора ':target' вы можете добавить особый стиль целевому элементу страницы, чтобы он привлекал больше внимания.

Но вы можете сделать даже больше. Вы можете скрывать или отображать элементы на основании того, являются ли они целевыми или нет. Ниже дан пример. Он показывает небольшое меню с четырьмя пунктами и каждый пункт ссылается на какой-то текст. Но сначала никакой текст не показывается. Каждый пункт — это ссылка на элемент с целевым ID (#item1, #item2...) и эти элементы видны только тогда, когда являются целью текущего URL.

Попробуйте кликнуть на пункты меню и следите за адресной строкой браузера для того, чтобы увидеть текущий URL.

Это — элемент, соответствующий пункту 1. Он не должен быть видимым до тех пор, пока вы не последуете по ссылке в "#item1".

Если вы перешли к пункту 2, тогда этот элемент должен быть видимым.

Этот элемент виден, если вы щёлкните на третий пункт меню. Этот элемент имеет URL, который вы можете использовать где угодно. Вы можете вставить его в любую другую страничку и перейти прямо к этому пункту.

Вот, как это работает. Есть две важных части: источник HTML и свойство 'display'. Сначала документ HTML. У него есть несколько ссылок и элементов с соответствующими ID:

<p>
  <a href="#item1">пункт 1</a>
  <a href="#item2">пункт 2</a>
  <a href="#item3">пункт 3</a>
  <a href="#default">очистить</a>

<div class="items">
  <p id="item1">... пункт 1...
  <p id="item2">... пункт 2...
  <p id="item3">...
  <p id="default"><!-- по умолчанию не показывать текст -->
</div>

Эти правила стилей сначала скрывают все P внутри DIV, но затем отменяют действие для P, который является текущей целью:

div.items p {display: none}
div.items p:target {display: block}

Вот и все. Далее добавляются цвета, поля, границы и т.д., таким образом пример становится более похожим на меню. Вы можете посмотреть, как это делается, взглянув на исходный код страницы.

На самом деле, мы добавили ':not(:target)', для того, чтобы убедиться, что браузеры CSS3 будут скрывать элементы. Следовательно, эти правила более подходящие:

div.items p:not(:target) {display: none}
div.items p:target {display: block}

Интерфейс вкладок

Как только вы поняли описанное выше, для вас не будет проблемой немного поиграть и создать настоящий интерфейс с вкладками: набор правил стиля, который не только показывает различное содержание на основании того, какая кнопка нажата, но и также меняет внешний облик самих кнопок.

Вот пример. Он использует не 'display: none', а 'z-index'. Если вы хотите знать, как это работает, просто выполните "посмотреть исходный код страницы"…

Вкладка 1

Кто-то может утверждать, что...

Вкладка 2

... 30 строк CSS — это скорее много, и...

Вкладка 3

... что 2 должно быть достаточно, но...

По умолчанию

... это работает!