CSS: a tabbed interface

‘:TARGET’ 虛擬的類型

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 should be visible.

This element is visible if you clicked on the third menu item. The element has a URL, that you can use elsewhere as well. You can 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”…

Tab 1

One might well argue, that...也許有人會産生爭議

Tab 2

... 30 lines of CSS is rather a lot, and...CSS 的30 行或許太多了

Tab 3

... that 2 should have been enough, but...這樣2就應該足夠了

Default

... it works!它就完成了!

致謝

以上文章是基於 Daniel Glazman的最初想法. 詳見他在2003年1月9日”blog” 中的解析和他在1月13日的演示.

網頁樣式表 CSS的提示與竅門

‘:TARGET’ 虛擬的類型

指定介面

致謝

網頁樣式表
CSS的提示與竅門