Tab在當前的Web應用中是非常常見的，最大的好處在于可以充分的利用有限的空間來展示更多的內容。常見的的Tab一般都是通過Javascript來實現，它的好處是靈活和功能強大。但是在某些情況下，如果僅僅需要一個簡單的內容切換時是可以考慮使用純CSS來實現的。本文主要介紹兩種純CSS的實現方案： 1. 錨點 + :target; 2. 純錨點; 這兩種各有各優點，也有各自的局限性。 具體的Demo請查看這里 方案一: 錨點 + :target CSS3中引入了一個新的偽類:target，當用戶和頁面進行某些交互時會觸發，例如有以下的代碼，當用戶點擊鏈接時，便會觸發p元素的:target偽類。 a href="#dest" Link to Dest /a p id="dest" This is a new paragraph. /p 方案一便是利用:target偽類來實現Tab切換。實現原理為：在頁面加載的時候通過CSS隱藏Tab相對應的內容，同時在:target偽類中將Tab內容設置為可見。 HTML結構如下： dl dt a href="#a" Tab A /a /dt dd id="a" Content A /dd dt a href="#b" Tab B /a /dt dd id="b" Content B /dd dt a href="#c" Tab C /a /dt dd id="c" Content C /dd dt a href="#d" Tab D /a /dt dd id="d" Content D /dd /dl 使用該結構的一個好處在于缺少CSS時依然可以清晰的閱讀內容。 關鍵的CSS代碼如下dd{ padding: 5px; /*隱藏Tab的內容*/ display:none; -moz-border-radius: 5px; margin-top:20px }
使用CSS方案的一個弊端在于不易區分哪個Tab是當前選中的，一個簡單的方式是給相應的Tab以及Tab內容設置相同的背景色，這樣當Tab內容顯示時，能夠更清晰的辨別當前Tab。此外，由于是使用了CSS3中的選擇符，因此目前只能在Firefox、Safari、IE8等現代瀏覽器下使用。 方案二: 純錨點 方案二的原理很簡單，在大多數瀏覽器下，當點擊錨點鏈接時，錨點對應的內容會自動跳到可視范圍以內。根據該原理，將Tab的所有內容放到一個固定高度的容器中，并且設置容器的overflow為hidden，此外每個Tab內容的高度需要與容器保持一致。在該結構下，當點擊錨點鏈接時對應的內容會自動跳轉到可視范圍以內容，即容器內。 具體的HTML結構如下： ul id="tab_nv" li a href="#a2" Tab A /a /li li a href="#b2" Tab B /a /li li a href="#c2" Tab C /a /li li a href="#d2" Tab D /a /li /ul div id="tab_content" div id="a2" Content A /div div id="b2" Content B /div div id="c2" Content C /div div id="d2" Content D /div /div 由于和方案一的原理不一樣，此處的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會隱藏 html教程
