CSS實作Tab技巧_PHP教程
- WBOY原創
- 2016-07-22 09:02:331001瀏覽
程式設計師都知道一般Tab都是靠Javascript來實現的，javascript的好處是功能強大且靈活。但是也有特殊情況，如果只需一個簡單的內容切換我們就可以利用CSS實作Tab。那麼CSS實作Tab需要如何操作呢？下面就跟小編一起來學習CSS實作Tab技巧吧！ This is a new paragraph.
1. 錨點 :target;
2. 純錨點;
這兩種各有各優點，也有各自的限制。
具體的Demo請查看這裡
方案一: 錨點 :target
CSS3中引入了一個新的偽類:target，當使用者和頁面進行某些互動時會觸發，例如有以下的程式碼，當使用者點擊連結時，就會觸發p元素的:target偽類別。
Link to Dest
方案一便是利用:target偽類別來實作Tab切換。實作原理為：在頁面載入的時候透過CSS隱藏Tab相對應的內容，同時在:target偽類別中將Tab內容設定為可見。
HTML結構如下：
|
使用CSS方案的一個弊端在於不易區分哪個Tab是目前選取的，一個簡單的方式是給對應的Tab以及Tab內容設定相同的背景色，這樣當Tab內容顯示時，能夠更清晰的辨別目前Tab。此外，由於是使用了CSS3中的選擇符，因此目前只能在Firefox、Safari、IE8等現代瀏覽器下使用。
方案二: 純錨點
方案二的原理很簡單，在大多數瀏覽器下，當點擊錨點連結時，錨點對應的內容會自動跳到可視範圍內。根據該原理，將Tab的所有內容放到一個固定高度的容器中，並且設定容器的overflow為hidden，此外每個Tab內容的高度需要與容器保持一致。在該結構下，當點擊錨點連結時對應的內容會自動跳到可視範圍以內容，即容器內。
具體的HTML結構如下：
Content A
Content B
Content C
Content D
由於和方案一的原理不一樣，此處的HTML結構也只能使用Tab和內容分離的結構，使用該結構的一個問題在於當CSS缺失的情況下無法清楚的閱讀內容。
關鍵的CSS程式碼如下：
/*為Tab Content容器設定高度*/
#tab_content{
height: 190px;
overflow: hidden;
}
/*為每個Tab Content定高度，需要與容器一致*/
#tab_content .content{
padding: 5px;
-moz-border-radius: 5px;
height: 190px;
overflow: hidden;
}
與方案一一樣，這裡也透過為Tab以及對應內容設定相同背景色來解決選取識別問題。
總結：
1. 純CSS實現的Tab受限很多，例如方案二中需要為每個Tab Content設定相同的高度。
2. 無法有效的標識目前選取的Tab，本文是透過設定相同背景色來區分，在許多情況下不一定適用。
3. 兩個方案都存在相容性問題，方案一使用了CSS3的選擇符，受限於CSS的實作;而方案二據說在Opera下不靈。
4. 方案一中，當點選其他會觸發:target的錨點(或發生類似互動)時，Tab Content會隱藏。