純 CSS 選項卡的實現例子

eb開發中，選項卡效果是非常常見的。幾乎所有的大型網站都在使用，如新浪、網易、騰迅······ 查看原始碼，你會發現都是基於JavaScript實現的。那麼只基於CSS 可以實現選項卡嗎？可以嘀

基於錨點定位實現的選項卡

很多人只知道A標籤做超連結，卻不知道其另一個功能，頁面內容的錨點定位：

<a href="#bottom">點擊跳轉到頁面底部</a>
點擊上面的連結，會自動定位到網頁中id為bottom的元素，實際上改變的是改變側邊滾動的scrollTop值，你可以點擊下面DEMO下載，查看原理示範DEMO。

下面是基於描點定位選項卡實現的HTML代碼

<div class="css-tab">
    <ul class="tab-ul">
        <li><a href="#tab-1">選項卡1</a></li>
        <li><a href="#tab-2">選項卡2</a></li>
    </ul>
    <div class="tab-con">
        <div id="tab-1">
            這裡放選項卡1的內容
         </div>
        <div id="tab-2">
             這裡放選項卡2的內容
         </div>
    </div>
</div>
下面基本的CSS樣式

*{
    margin: 0;
    padding: 0;
}
.clearfix {
    *zoom:1;
}
.clearfix:before ,.clearfix:after {
    display: table;
    line-height: 0;
    content: '';
}
.clearfix:after {
    clear: both;
}
.css-tab {
    width: 200px;
    height:auto;
    margin: 8px auto;
}
.tab-ul {
    padding-left: 1px;
}
.tab-ul li{
    padding-left: 8px;
    padding-right: 8px;
    line-height: 28px;
    border: 1px solid #ccc;
    margin-left: -1px;
    border-bottom:none ;
    float: left;
    list-style: none;
}
.tab-ul li a {
    text-decoration: none;
}
.tab-con {
    overflow: hidden;
}
.tab-con,#tab-1,#tab-2 {
    height: 200px;
}
#tab-1 {
    background: #B3C2DE;
}
#tab-2 {
    background: #d8ffef;
}
關於以上示範代碼，你可以點擊示範DEOM線上查看和研習，當然你也可以輕鬆的下載原始碼：

查看DEMO 下載DEMO
基於CSS選取器實現的選項卡效果

在CSS 3中，CSS 的選取器是擴充了。在製作選項卡的過程中，我們會通過到“屬性選取器”和“兄弟選取器”。具體實現的HTML代碼結構如下：

<div class="tabs">
    <div class="tab">
        <label for="check1">第1個選項卡</label>
        <input id="check1" type="radio" name="tabs" checked="checked" />
        <div class="content">
            這裡放置第1個選項卡的內容
        </div>
    </div>
    <div class="tab">
        <label for="check2">第2個選項卡</label>
        <input id="check2" type="radio" name="tabs" />
        <div class="content">
            這裡放置第2個選項卡的內容
        </div>
    </div>
    <div class="tab">
        <label for="check3">第3個選項卡</label>
        <input id="check3" type="radio" name="tabs" />
        <div class="content">
            這裡放置第3個選項卡的內容
        </div>
    </div>
</div>
這是相應的CSS：

*{
    margin: 0;
    padding: 0;
}
.clearfix {
    *zoom:1;
}
.clearfix:before ,.clearfix:after {
    display: table;
    line-height: 0;
    content: '';
}
.clearfix:after {
    clear: both;
}
.tabs {
    width:300px;
    height: 300px;
    background: pink;
    position: relative;
}
.tab {
    float: left;
    width:80px;
    height: 70px;
    overflow: visible;
}
.tab label {
    display: block;
    width:80px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    font-size: 13px;
}
.tab input {
    display: none;
}
.content {
    position: absolute;
    top: 40px;
    left: 0;
    width: 300px;
    height: 260px;
    z-index: 1;
}
.tab input:checked ~ .content {
    z-index: 2;
    background: pink;
}
注意：基於選取器的選項卡由於低版本的IE瀏覽器對進階選取器不支援，故選項卡效果是不支援切換的。另外，選取器在IE 8中必須文檔聲明為HTML 5才能正常解析。為了讓低版本的ie也支援一些進階選取器，你可以看一下selectivizr。