純CSS實現Tab的兩種方案_PHP教程

Tab在當前的Web應用中是非常常見的，最大的好處在於可以充分的利用有限的空間來展示更多的內容。常見的的Tab一般都是通過Javascript來實現，它的好處是靈活和功能強大。但是在某些情況下，如果僅僅需要一個簡單的內容切換時是可以考慮使用純CSS來實現的。本文主要介紹兩種純CSS的實現方案：

　　1. 錨點 + :target;

　　2. 純錨點;

　　這兩種各有各優點，也有各自的局限性。

　　具體的Demo請查看這裡

　　方案一: 錨點 + :target

　　CSS3中引入了一個新的偽類:target，當使用者和頁面進行某些互動時會觸發，例如有以下的代碼，當使用者點選連結時，便會觸發p元素的:target偽類。

Link to Dest

This is a new paragraph.

　　方案一便是利用:target偽類來實現Tab切換。實現原理為：在頁面載入的時候通過CSS隱藏Tab相對應的內容，同時在:target偽類中將Tab內容設定為可見。

　　HTML結構如下：

Tab A

Content A

Tab B

Content B

Tab C

Content C

Tab D

Content D

使用該結構的一個好處在於缺少CSS時依然可以清晰的閱讀內容。
關鍵的CSS代碼如下

dd{
padding: 5px;
/*隱藏Tab的內容*/
display:none;
-moz-border-radius: 5px;
margin-top:20px
}

dd:target{
position: absolute;
/*顯示Tab的內容*/
display:block;
}
/*給Tab以及相應的內容設定相同的背景色*/
.tab-a,.content-a{
background: #CCFF00;
}
.tab-b,.content-b{
background: #CCFFFF;
}
.tab-c,.content-c{
background: #FFFF00;
}
.tab-d,.content-d{
background: #FFCCFF;
}

　　使用CSS方案的一個弊端在於不易區分哪個Tab是當前選中的，一個簡單的方式是給相應的Tab以及Tab內容設定相同的背景色，這樣當Tab內容顯示時，能夠更清晰的辨別當前Tab。此外，由於是使用了CSS3中的選擇符，因此目前只能在Firefox、Safari、IE8等現代瀏覽器下使用。

　　方案二: 純錨點

　　方案二的原理很簡單，在大多數瀏覽器下，當點擊錨點連結時，錨點對應的內容會自動跳到可視範圍以內。根據該原理，將Tab的所有內容放到一個固定高度的容器中，並且設定容器的overflow為hidden，此外每個Tab內容的高度需要與容器保持一致。在該結構下，當點擊錨點連結時對應的內容會自動跳轉到可視範圍以內容，即容器內。

　　具體的HTML結構如下：

• Tab A


• Tab B


• Tab C


• Tab D

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會隱藏。

http://www.bkjia.com/PHPjc/735089.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/735089.htmlTechArticleTab在當前的Web應用中是非常常見的，最大的好處在於可以充分的利用有限的空間來展示更多的內容。常見的的Tab一般都是通過Javascript來實現...

