CSS實現Tab技巧

　　程序員們都知道一般Tab都是靠Javascript來實現的javascript的好處是功能強大並且靈活但是也有特殊情況如果只需一個簡單的內容切換我們就可以利用CSS實現Tab那麼CSS實現Tab需要如何操作呢？下面就和小編一起來學習CSS實現Tab技巧吧！
錨點 + :target;
純錨點;
這兩種各有各優點也有各自的局限性
具體的Demo請查看這裡
方案一: 錨點 + :target
CSS中引入了一個新的偽類: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 class="taba first"><a href="#a">Tab A</a></dt>
    <dd id="a" class="contenta">
    Content A
    </dd>
    <dt class="tabb"><a href="#b">Tab B</a></dt>
    <dd id="b" class="contentb">
    Content B
    </dd>
    <dt class="tabc"><a href="#c">Tab C</a></dt>
    <dd id="c" class="contentc">
    Content C
    </dd>
    <dt class="tabd"><a href="#d">Tab D</a></dt>
    <dd id="d" class="contentd">
    Content D
    </dd>
</dl>
使用該結構的一個好處在於缺少CSS時依然可以清晰的閱讀內容
關鍵的CSS代碼如下

　　dd{
    padding: px;
    /*隱藏Tab的內容*/
    display:none;
    mozborderradius: px;
    margintop:px
}
 
dd:target{
    position: absolute;
    /*顯示Tab的內容*/
    display:block;
}
/*給Tab以及相應的內容設置相同的背景色*/
tabacontenta{
    background: #CCFF;
}
tabbcontentb{
    background: #CCFFFF;
}
tabccontentc{
    background: #FFFF;
}
tabdcontentd{
    background: #FFCCFF;
}

使用CSS方案的一個弊端在於不易區分哪個Tab是當前選中的一個簡單的方式是給相應的Tab以及Tab內容設置相同的背景色這樣當Tab內容顯示時能夠更清晰的辨別當前Tab此外由於是使用了CSS中的選擇符因此目前只能在FirefoxSafariIE等現代浏覽器下使用
方案二: 純錨點
方案二的原理很簡單在大多數浏覽器下當點擊錨點鏈接時錨點對應的內容會自動跳到可視范圍以內根據該原理將Tab的所有內容放到一個固定高度的容器中並且設置容器的overflow為hidden此外每個Tab內容的高度需要與容器保持一致在該結構下當點擊錨點鏈接時對應的內容會自動跳轉到可視范圍以內容即容器內
具體的HTML結構如下
<ul id="tab_nv">
    <li class="taba"><a href="#a">Tab A</a></li>
    <li class="tabb"><a href="#b">Tab B</a></li>
    <li class="tabc"><a href="#c">Tab C</a></li>
    <li class="tabd"><a href="#d">Tab D</a></li>
</ul>
<div id="tab_content">
    <div id="a" class="content contenta">
    Content A
    </div>
    <div id="b" class="content contentb">
    Content B
    </div>
    <div id="c" class="content contentc">
    Content C
    </div>
    <div id="d" class="content  contentd">
    Content D
    </div>
</div>
由於和方案一的原理不一樣此處的HTML結構也只能使用Tab和內容分離的結構使用該結構的一個問題在於當CSS缺失的情況下無法清晰的閱讀內容
關鍵的CSS代碼如下
/*給Tab Content容器設置高度*/
#tab_content{
    height: px;
    overflow: hidden;
}
/*給每個Tab Content定高度需要與容器保持一致*/
#tab_content content{       
    padding: px;
    mozborderradius: px;
    height: px;
    overflow: hidden;
}
與方案一一樣這裡也通過給Tab以及對應內容設置相同背景色來解決選中識別問題
總結
純CSS實現的Tab受限很多比如方案二中需要給每個Tab Content設置相同的高度
無法有效的標識當前選中的Tab本文是通過設置相同背景色做區分在很多情況下不一定適用
兩個方案都存在兼容性問題方案一使用了CSS的選擇符受限於CSS的實現;而方案二據說在Opera下不靈
方案一中當點擊其他會觸發:target的錨點(或發生類似交互)時Tab Content會隱藏

From:http://tw.wingwit.com/Article/program/PHP/201311/21019.html