DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS實現Tab技巧
CSS實現Tab技巧
編輯:CSS詳解     

  程序員們都知道一般Tab都是靠Javascript來實現的,Javascript的好處是功能強大並且靈活。但是也有特殊情況,如果只需一個簡單的內容切換我們就可以利用CSS實現Tab。那麼CSS實現Tab需要如何操作呢?下面就和小編一起來學習CSS實現Tab技巧吧!
  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 class="tab-a first"><a href="#a">Tab A</a></dt>
<dd id="a" class="content-a">
Content A
</dd>
<dt class="tab-b"><a href="#b">Tab B</a></dt>
<dd id="b" class="content-b">
Content B
</dd>
<dt class="tab-c"><a href="#c">Tab C</a></dt>
<dd id="c" class="content-c">
Content C
</dd>
<dt class="tab-d"><a href="#d">Tab D</a></dt>
<dd id="d" class="content-d">
Content D
</dd>
</dl>
使用該結構的一個好處在於缺少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結構如下:
<ul id="tab_nv">
<li class="tab-a"><a href="#a2">Tab A</a></li>
<li class="tab-b"><a href="#b2">Tab B</a></li>
<li class="tab-c"><a href="#c2">Tab C</a></li>
<li class="tab-d"><a href="#d2">Tab D</a></li>
</ul>
<div id="tab_content">
<div id="a2" class="content content-a">
Content A
</div>
<div id="b2" class="content content-b">
Content B
</div>
<div id="c2" class="content content-c">
Content C
</div>
<div id="d2" class="content content-d">
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會隱藏。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved