程序員們都知道一般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;
}