說到Tab切換，你可能首先想到的就是使用jQuery，短短幾行代碼就可以輕松搞定一個Tab切換。而今天所要分享的，是使用 0 行js代碼來實現Tab切換！
方法一：模擬單選框原理
該方法大致原理如下：當用戶點擊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偽類
該方法大致原理如下：當用戶點擊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>
虎課網https://www.wode007.com/sites/73267.html 設計塢https://www.wode007.com/sites/73738.html
這種方式的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切換