教你兩招用純CSS寫Tab切換

說到Tab切換，你可能首先想到的就是使用jQuery，短短幾行代碼就可以輕松搞定一個Tab切換。

而今天所要分享的，是使用 0 行JS代碼來實作Tab切換！

具體效果如下：

Tab切換

方法一：模拟單選框原理

關于模拟單選框，在我之前文章中有講到，詳情請戳→

純CSS模拟單選框和複選框

該方法大緻原理如下：

當使用者點選label元素時，該label所綁定的input單選框就會被選中，同時通過使用CSS選擇器讓被選中的input元素之後的label和.content元素都加上相應的樣式。

具體如何實作呢？請耐心往下看...

1. HTML結構

<!--HTML-->
<ul>
    <li>
        <input id="tab1" type="radio" name="tab" checked>
        <label for="tab1">選項一</label>
        <div class="content">選項一内容</div>
    </li>
    <li>
        <input id="tab2" type="radio" name="tab">
        <label for="tab2">選項二</label>
        <div class="content">選項二内容</div>
    </li>
    <li>
        <input id="tab3" type="radio" name="tab">
        <label for="tab3">選項三</label>
        <div class="content">選項三内容</div>
    </li>
</ul>
           

單選框想必大家都會用吧，type為radio，name屬性值相同即可。

另外需要注意以下兩點：

① label需要綁定input，方法就是label的for屬性值與input的id一緻，這樣當點選label元素時input單選框就會被選中

② input、label和div三者是有順序的，不能随意調換順序（原因後面你就知道了）

2. CSS樣式

沒有JS，那麼CSS自然就得扮演舉足輕重的角色。

/*CSS*/
*{ margin: 0; padding: 0;}
ul{ position: relative; width: 300px; margin: 100px auto;}
ul li{ list-style: none;}
ul li input{ display: none;}
ul li label{ float: left; width: 100px; text-align: center; line-height: 30px; border: 1px solid #000; border-right: 0; box-sizing: border-box; cursor: pointer; transition: all .3s;}
ul li input:checked+label{ color: #fff; background-color: #000;}
ul li:last-child label{ border-right: 1px solid #000;}
ul li .content{ opacity: 0; position: absolute; left: 0; top: 31px; width: 100%; height: 300px; border: 1px solid #000; box-sizing: border-box; font-size: 24px; text-align: center; line-height: 300px; color: #fff; transition: all .3s;}
ul li:nth-child(1) .content{ background-color: #0f0;}
ul li:nth-child(2) .content{ background-color: #00f;}
ul li:nth-child(3) .content{ background-color: #f0f;}
ul li input:checked~.content{ opacity: 1;}
           

這裡同樣有幾個重點需要注意：

① input需要隐藏，因為我們并不需要顯示它，但它卻是實作Tab切換的核心力量

② “input:checked+label” 表示被選中的單選框後的 label 元素需要做标記

③ .content 元素需要先全部隐藏

③ “input:checked~.content” 表示被選中的單選框後的 .content 元素需要顯示

注： + 表示相鄰兄弟選擇器，也就是選擇緊鄰其後的元素； ~ 表示兄弟選擇器，也就是選擇該元素之後的所有同級元素

方法二：:target僞類

關于:target僞類，在我之前文章中有講到，詳情請戳→

純CSS制作單頁Web應用

當使用者點選a元素時，頁面URL後會相應添加目前所點選的錨連結，這時對應此錨連接配接id的.content元素就會應用:target僞類的樣式，而同時也給已應用上:target僞類的.content元素之後的a元素自身應用樣式。

<!--HTML-->
<ul>
    <li>
        <div class="content" id="content1">選項一内容</div>
        <a href="#content1">選項一</a>
    </li>
    <li>
        <div class="content" id="content2">選項二内容</div>
        <a href="#content2">選項二</a>
    </li>
    <li>
        <div class="content" id="content3">選項三内容</div>
        <a href="#content3">選項三</a>
    </li>
</ul>
           

這種方式的HTML結構相對比較簡單，不需要使用隐藏的單選框作為媒介，而是使用錨連結和:target作為連接配接“選項”與“選項内容”之間的橋梁。

① 每個a标簽的href屬性須與其兄弟節點.content元素的id值一緻

② .content元素與a标簽的順序不能更改

/*CSS*/
*{ margin: 0; padding: 0;}
a{ text-decoration: none; color: #000;}
ul{ position: relative; width: 300px; margin: 100px auto;}
ul li{ list-style: none;}
ul li a{ float: left; width: 100px; text-align: center; line-height: 30px; border: 1px solid #000; border-right: 0; box-sizing: border-box; cursor: pointer; transition: all .3s;}
ul li:last-child a{ border-right: 1px solid #000;}
ul li .content{ opacity: 0; position: absolute; left: 0; top: 31px; width: 100%; height: 300px; border: 1px solid #000; box-sizing: border-box; font-size: 24px; text-align: center; line-height: 300px; color: #fff; transition: all .3s;}
ul li:nth-child(1) .content{ background-color: #0f0;}
ul li:nth-child(2) .content{ background-color: #00f;}
ul li:nth-child(3) .content{ background-color: #f0f;}
ul li .content:target{ opacity: 1;}
ul li .content:target+a{ color: #fff; background-color: #000;}
           

① “.content:target” 将錨連結指向的目前.content元素應用樣式

② “.content:target+a” 将錨連結指向的目前.content元素後緊鄰的a元素應用樣式

本文重點總結

無需JS，利用單選框或錨連結，再配合一些CSS樣式即可制作簡單的Tab切換