CSS實作Tab技巧_PHP教程

程式設計師都知道一般Tab都是靠Javascript來實現的，javascript的好處是功能強大且靈活。但是也有特殊情況，如果只需一個簡單的內容切換我們就可以利用CSS實作Tab。那麼CSS實作Tab需要如何操作呢？下面就跟小編一起來學習CSS實作Tab技巧吧！
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;
}

 

   

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/371856.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/371856.htmlTechArticle程式設計師都知道一般Tab都是靠Javascript來實現的，javascript的好處是功能強大且靈活。但也有特殊情況，如果只需一個簡單的內容切換我...