(Ця сторінка використовує каскадні таблиці стилів CSS)
Цей документ є перекладом статті з сайту W3C.
Оригінальна версія документу знаходиться тільки на сайті W3C https://www.w3.org/Style/Examples/007/target.html
Цей переклад НЕ є офіційним документом W3C.
Всі Авторські Права Належать W3C.
Цей документ може містить помилки перекладу та похибки.
Автор: Скрипець Євген, проектувальник SSL (всі переклади автора: en, ru, uk )
Локальна копія: https://www.indeep76.com/Style/Example007ukr/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 січня.