Bert Bosсоздан 6 февраля 2003;
последняя правка $Date: 2007/07/20 16:16:25 $ GMT
(Эта страничка использует каскадные таблицы стилей CSS)
Данный документ является переводом статьи "Web Style Sheets CSS tips & tricks".
Оригинальная версия документа существует только на сайте W3C https://www.w3.org/Style/Examples/007/target.html
Данный перевод НЕ является официальным документом W3C.
Все Авторские Права Принадлежат W3C.
Данный документ может содержать ошибки перевода и опечатки.
Автор перевода: Евгений Скрипец - владелец SiteSpeedLaboratory. Все переводы автора: en, ru, uk
Локальная версия: https://www.indeep76.com/Style/Example007/target.html
URL обычно указывает на страницу. Но когда URL заканчивается на "#что-то", он переходит к особому элементу в этой странице. Браузеры обычно пытаются убедиться, что целевой элемент - видимый и, по мере возможности, расположен в верхней части экрана.
При помощи свойства ':target' вы можете добавить особый стиль к целевому элементу, таким образом, он будет привлекать больше внимания.
Но вы можете сделать больше. Вы можете скрывать или отображать элементы на основании того, являются ли они целевыми или нет. Ниже дан пример. Он показывает небольшое меню с четырьмя пунктами и каждый пункт имееет ссылку на какой-то текст. Но сначала текст не показывается. Каждый пункт - это ссылка на элемент с целевым ID (#item1, #item2...) и эти элементы видимы только когда являются целью текущего URL.
Попробуйте кликнуть на пункты меню и следите за адресной строкой браузера для того, чтобы увидеть текущий URL.
Это - элемент, соответствующий пункту 1. Он не должен быть видимым до тех пор, пока вы не последуете по ссылке в "#item1".
Если вы перешли к пункту 2, этот элемент должен быть видимым.
Этот элемент видимый, если вы кликнули на третий пункт меню. Элемент имеет URL, который вы можете использовать где угодно. Вы можете вставить его в любую другую страничку и перейти прямо к этому пункту.
Вот, как это работает. Есть две важных части: источник HTML и свойство 'display'. Сначала документ HTML. У него есть несколько ссылок и элементов с соответствующими ID:
<p> <a href="#item1">item 1</a> <a href="#item2">item 2</a> <a href="#item3">item 3</a> <a href="#default">clear</a> <div class="items"> <p id="item1">... item 1... <p id="item2">... item 2... <p id="item3">... <p id="default"><!-- by default, show no text --> </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'. Если вы хотите знать, как это работает, просто выполните "view source"…
Эта страница основана на идее Даниела Глазмана. Смотрите пояснение в его блоге от 9 января 2003 и его демонстрацию от 13 января.