Bert
Bos,style activity leadCopyright ©1994–2022 W3C®Privacy policy
Created 6 Feb 2003;
Last updated2022年02月10日 星期四 05:40:52
這是一份翻譯。與英文版本相比，它可能包含錯誤或者過時。翻譯員:Samuel Chong of Chinese Translation Services through its pro bono translation services
URL通常都是指向一個網頁. 但是當URL 以"#something"結尾時,它會指引你去網頁中的特定要素.流覽器一般會嘗試確保被指定的要素是顯而易見的並且儘量把它顯示在頁面的最上方.
在"target"選擇器內, 你可以添加特定的形式到指定要素中, 使它得到更多的注意.
但是你可以做的更多. 你可以隱藏或顯示這些成分基於它們是目標與否. 接下來是一個例子. 它在一個小功能表裡顯示了四個選項, 並且每個選項都有連結到一些文本.但在一開始並沒有顯示這些文本. 每個選項都連結著一個有確定ID的組成部分(#item1,#item2...), 並且這些組成部分只有在當它們是當前的URL的目的地時才能看的見.
試著按一下功能表上的選項並且注意在流覽器的地址欄就可看到目前的URL.
This is the element that corresponds to item 1. It should not be visible, unless you followed a link that explicitly targeted "#item1".
If you jumped to item 2, then this element shouldbe visible.
This element is visible if you clicked on the third menuitem. The element has a URL, that you can use elsewhere as well. Youcan put it in some other Web page and jump directly to this item.
以下是它的運作. HTML 的原始程式碼和'display'特徵是兩個重要的組成部分.首先HTML的文檔, 它包括一部份網頁的連結和與組成部分相應的IDs:
<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>
這種形式規則首先會把所有在DIV裡的Ps隱藏起來, 然後再覆蓋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"...
以上文章是基於 Daniel Glazman.的最初想法. 詳見他在2003年1月9日"blog" 中的解析和他在1月13日的 演示.
Bert
Bos,style activity leadCreated 6 Feb 2003;
Last updated2022年02月10日 星期四 05:40:52