說到Tab切換，你可能首先想到的就是使用jQuery，短短幾行代碼就可以輕松搞定一個Tab切換。
而今天所要分享的，是使用 0 行JS代碼來實現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切換