Bert
BosСтвораны 6 лютага 2003;
Апошнія змены $Date: 2007/07/20 16:16:25 $ GMT
(Гэтая старонка выкарыстоўвае каскадныя табліцы стыляў CSS)
Дадзены дакумент з'яўляецца перакладам артыкула "Web Style Sheets CSS
tips & tricks".
Арыгінальная версія якога існуе толькі на сайце W3C http://www.w3.org/Style/Examples/007/target.html
Дадзены пераклад не з'яўляецца афіцыйным дакументам W3C.
Усе Аўтарскія Правы Належаць W3C.
Дадзены дакумент можа ўтрымоўваць памылкі перакладу і памылкі друку.
Аўтар: Аляксей Пятроў ( усе пераклады ) Дзякуй за падтрымку: Чорны Квадрат
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 студзеня.