Bert Bosсъздадено на 6 Feb 2003;
последна промяна $Date: 2008/07/07 15:03:47 $ GMT
Настоящият документ е превод на статията "A tabbed interface".
Оригиналната версия на документа се намира само на уебсайта на W3C http://www.w3.org/Style/Examples/007/target.
Това НЕ е официален документ на W3C. Всички авторски права принадлежат на W3C.
Автор: Александър Дичев (всички преводи на автора). Новини в блога.
Преводът е направен на 25.08.2008. Последна актуализация на 17.12.2008.
Настоящият документ може да съдържа грешки или неточности в превода.
Ако желаете да предложите корекция или да сигнализирате за грешка, свържете се с автора.
Документът е преведен със съдействието на Today's Moon и Фази на луната.
(Тази страница използва CSS style sheets)
Един URL обикновено сочи към страница. Когато URL завършва с "#нещо" той сочи към определен елемент от тази страница. Браузърите се опитват да покажат посочения елемент видим и ако е възможно най-горе на екрана.
Със селектора ':target' може да се добави специфичен стил към таргетиран елемент, така че да му се обърне повече внимание.
Но може да се направи повече. Могат да се скрият или покажат елементи на базата на това, дали са таргетирани или не. По-долу следва пример. Той показва малко меню с четири елемента и всеки от тях е свързан към малко текст. Но в началото не е показан никакъв текст. Всеки елемент от менюто е връзка към елемент с ID (#item1, #item2...) и тези елементи са видими само, когато са таргетирани от настоящия URL.
Опитайте да кликнете елементите от менюто като следите адрес-полето на браузъра за да видите съответния URL.
Това е елемент, съответстващ на item 1. Той трябва да е невидим, докато не последвате връзка, изрично сочеща таргетиран "#item1".
Ако прескочите до item 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"><!-- по подразбиране, не се показва текст --> </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'. Ако желаете да разберете как работи, просто прегледайте кода на страницата…
Тази страница е базирана на оригиналната идея на Daniel Glazman. Вижте обяснението в неговия "блог" от 9 януари 2003 и примера му от 13 януари.