善用CSS僞類，不用JS也能作出選項卡功能

先看看Demo:

CODEPEN 示例頁面

講到選項卡（Tabs）功能時，大多會想到用JavaScript去作，像知名的前端框架：Bootstrap所提供的Tab元件，就是用jQuery實現的（其實網絡上有不少用jQuery開發的Tab）；但其實不用jQuery或JavaScript技術，就能實現高效能且易維護的Tabs元件，讓咱們來看看是怎麼辦到的：

規劃HTML結構

1. 一般咱們會用列表元素來製做選項卡的界面，每一個<li>表明用來包含一組選項卡與其對應的內容塊。
2. 接下來加入選項卡，選項卡必須使用<label>元素才能實做咱們要的功能，緣由待會會講，是這篇文章的核心技巧之一。
3. 內容塊則是<div>元素。
4. 再來咱們爲每一個<label>前面加上表單元素Radio button，結果以下：

<ul class="tabs">
  <li>
    <input type="radio" name="tabs">
    <label class="tab">頁面A</label>
    <div class="section">內容A</div>
  </li>
  <li>
    <input type="radio" name="tabs">
    <label class="tab">頁面B</label>
    <div class="section">內容B</div>
  </li>
  <li>
    <input type="radio" name="tabs">
    <label class="tab">頁面C</label>
    <div class="section">內容C</div>
  </li>
</ul>

爲何使用Label與Radio button？

這篇文章的主要技巧也就是要靠這兩種元素的特性，由於咱們要「借用」Radio button的單選特性，決定哪一個Tab是Active，同時確保其餘Tab是未選中的狀態。

Radio button默認的樣式是很是醜陋的，並且咱們能改動的樣式也是有限的，因此不建議直接把它設計成Tab，因此咱們使用<label>來擔任觸發的角色，也比較容易改變樣式，再藉由Label的For屬性去觸發對應id的Radio button。

因此咱們爲Radio button加上id，而後將Label的for屬性指向對應的id：

<ul class="tabs">
  <li>
    <input type="radio" name="tabs" id="tabA">
    <label class="tab" for="tabA">頁面A</label>
    <div class="section">內容A</div>
  </li>
  <li>
    <input type="radio" name="tabs" id="tabB">
    <label class="tab" for="tabB">頁面B</label>
    <div class="section">內容B</div>
  </li>
  <li>
    <input type="radio" name="tabs" id="tabC">
    <label class="tab" for="tabC">頁面C</label>
    <div class="section">內容C</div>
  </li>
</ul>

這樣就完成咱們的HTML結構了，再來要寫點CSS，讓功能得以運做起來。

寫點CSS

1. 咱們先讓<li>並排（display:inline-block）。
2. 再來爲<label>和內容塊<div class=「section」>設計外觀。
3. 特別注意內容塊用絕對定位讓每次顯示的內容都在一樣的位置，以後咱們再控制層疊等級（z-index）和透明度（opacity）來實現顯示/隱藏。

li { display: inline-block; }

input[type="radio"] {
  position: absolute;
  outline: none;
    ...
}

.tab {
    ...
}

.section {
  position: absolute;
  top: 50px; // 取決於你的Label高度
  left: 0;
    ...
}

咦？仍是不能動？由於咱們還須要運用CSS的兩個重要技巧：僞類（Pseudo-class）和通用兄弟元素選擇器（Sibling Combinator），才能讓選項卡與內容塊作切換。

加入CSS僞類與通用兄弟元素選擇器

咱們爲Radio button加上僞類：checked，表示當這個Radio button被選中時（等於對應的標籤被選中使）纔會呈現的樣式。

input[type="radio"]:checked {
    ...
}

而後要作切換動做的是選項卡和內容塊，因爲它們與Radio button屬同一層父元素，因此咱們這裏要用到通用兄弟元素選擇器~來作，通用兄弟元素選擇器有兩種：

1. 相鄰兄弟選擇器（Adjacent Sibling Combinator）是用來選擇互爲兄弟元素的相鄰的元素。
2. 通用兄弟元素選擇器（General Sibling Combinator）則是用來選擇互爲兄弟元素的全部匹配的元素。

咱們使用通用兄弟元素選擇器便可：

input[type="radio"]:checked ~ .tab {        // 這裏也可使用相鄰兄弟選擇器來作
    ...
}

input[type="radio"]:checked ~ .section {
    ...
  z-index: 2;
}

注意內容內存塊（.section）要加上z-index屬性才能覆蓋其它選項卡的內容塊，最後咱們再將Radio button設爲透明或使用定位的技巧讓它消失在頁面上，前面沒有先提這點的緣由，是由於可讓你在點選選項卡時，觀察Radio button的選中狀態變化，同時也方便測試，確認選項卡對應的Radio button有正確被觸發。

這樣就大功告成啦！

整理

大略整理一下重點與須要注意的地方：

1. Radio button的單選特性是基於一樣的name屬性，因此name必定要設，並且要同樣；反之，你能夠設置多組name去實現多組的選項卡組件，並且各自是獨立運做，不會互相影響。
2. Radio button的id和Label的for是必要的屬性。
3. 內容塊的定位要避免覆蓋到選項卡。
4. 注意HTML的結構是否正確，CSS選擇器的使用是否正確（選項卡和內容塊有沒有在同一層）。
5. 注意z-index的設置是否正確。

本篇文章的技術給予選項卡UI另外一種開發的選擇，Radio button的特性還有不少應用能夠作（如Switcher），只要善用HTML表單元素與CSS的一些技巧，也能玩出不少有趣的功能，甚至替代JavaScript的部份工做。