說到Tab切換，你可能首先想到的就是使用jQuery，短短幾行代碼就可以輕鬆搞定一個Tab切換。 而今天所要分享的，是使用 0 行JS代碼來實現Tab切換！ 具體效果如下： Tab切換 方法一：模擬單選框原理 關於模擬單選框，在我之前文章中有講到，詳情請戳→純CSS模擬單選框和覆選框 該方法大致原理 ...
說到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; visibility:hidden; 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; visibility:visible;}
這裡同樣有幾個重點需要註意：
① input需要隱藏，因為我們並不需要顯示它，但它卻是實現Tab切換的核心力量
② “input:checked+label” 表示被選中的單選框後的 label 元素需要做標記
③ .content 元素需要先全部隱藏
③ “input:checked~.content” 表示被選中的單選框後的 .content 元素需要顯示
註： + 表示相鄰兄弟選擇器，也就是選擇緊鄰其後的元素； ~ 表示兄弟選擇器，也就是選擇該元素之後的所有同級元素
方法二：:target偽類
關於:target偽類，在我之前文章中有講到，詳情請戳→純CSS製作單頁Web應用
該方法大致原理如下：
當用戶點擊a元素時，頁面URL後會相應添加當前所點擊的錨鏈接，這時對應此錨連接id的.content元素就會應用:target偽類的樣式，而同時也給已應用上:target偽類的.content元素之後的a元素自身應用樣式。
1. HTML結構
<!--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標簽的順序不能更改
2. CSS樣式
/*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切換
