聽說CSS可以寫tab切換，我也來試一把

寫Express接下來的內容前，先來一篇輕松點兒的文章，之前我總結過一篇關于nth-child&nth-of-type的文章（還記得那篇文章的結論嗎？對，就是兩句話）。這一篇我依然來處理一個有關CSS的問題。

說到tab切換，咱們很熟悉，最常用的做法是使用JS處理顯示與隱藏，聽說利用CSS3的偽類選擇器也能實現相同的tab切換效果，于是我就試一把。

這個方法主要是借助input和checked屬性控制其后面元素的顯示與否，涉及到的需要搞懂的知識點就三個：

1、nth-of-type的使用

2、input的id和label的for屬性聯系

3、在css3中‘~’表示兄弟元素，‘+’表示相鄰元素

下面是實例區：

知道了上面這三點，那這個問題就簡單了，先看一下例子的DOM結構：

從上圖可以看出DOM結構很簡單，但是要注意兩點，第一：input的id和label中的for對應（如tab1），第二：input必須和其內容div.tab在同一級，也就是說它們必須擁有同一個父元素。

下面看一下本例的重點部分，樣式：

從樣式代碼上可以看出，當input處理checked時，通過“+”符給label加樣式，使用nth-of-type定位，在通過“~”將對應的內容區設置為display:block。

如果想讓這個切換看起來更動感，可以使用transition給切換加個動畫。

寫在最后的總結：

通過測試，這種方法在IE8下不兼容，這沒關系，因為我們可以在H5開發中用的爽爽的。哈哈

短內容，說完整事，哪怕只讀一篇也能學知識。點擊關注小鄭搞碼事，說的都是那堆代碼。謝謝您的鼓勵！

您2019豬事順利，心想事成。

前言

Tab 切換是種很常見的網頁呈現形式，不管是PC或者H5都會經常看到，今天就為小伙伴們提供多種純CSS Tab 切換的實現方式，同時對比一下那種代碼更方便，更通俗易懂。

3種純CSS方式實現Tab 切換

純CSS實現都面臨2個問題：

1、如何接收點擊事件？

2、如何操作相關DOM？

checked 偽類實現純 CSS Tab 切換

擁有 checked 屬性的表單元素， <input type="radio"> 或者 <input type="checkbox"> 能夠接收到點擊事件。

知識點:

1、使用 radio 標簽的 :checked 偽類，加上 <label for> 實現純 CSS 捕獲點擊事情

2、使用了 ~ 選擇符對樣式進行控制

<div class="container"> 
 <input class="nav1" id="li1" type="radio" name="nav"> 
 <input class="nav2" id="li2" type="radio" name="nav"> 
 <ul class='nav'> 
 <li class='active'><label for="li1">tab1</label></li> 
 <li><label for="li2">tab2</label></li> 
 </ul> 
 <div class="content"> 
 <div class="content1 default">tab1 內容:123456</div> 
 <div class="content2">tab2 內容:abcdefgkijkl</div> 
 </div> 
</div>

添加樣式

.container *{ 
 padding: 0; 
 margin: 0; 
} 
.container { 
 position: relative; 
 width: 400px; 
 margin: 50px auto; 
} 
.container input { 
 display: none; 
} 
.nav { 
 position: relative; 
 overflow: hidden; 
} 
.nav li { 
 width: 200px; 
 float: left; 
 text-align: center; 
 background: #ddd; 
 list-style: none; 
} 
.nav li label { 
 display: block; 
 width: 200px; 
 line-height: 36px; 
 font-size: 18px; 
 cursor: pointer; 
} 
.content { 
 position: relative; 
 overflow: hidden; 
 width: 400px; 
 height: 100px; 
 border: 1px solid #999; 
 box-sizing: border-box; 
 padding: 10px; 
} 
.content1, 
.content2 { 
 display: none; 
 width: 100%; 
 height: 100%; 
} 
.nav1:checked ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
.nav1:checked ~ .nav li:first-child { 
 background: #ff7300; 
 color: #fff; 
} 
.nav2:checked ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
.nav2:checked ~ .nav li:last-child { 
 background: #ff7300; 
 color: #fff; 
} 
.nav1:checked ~ .content > div { 
 display: none; 
} 
.nav1:checked ~ .content > div:first-child { 
 display: block; 
} 
.nav2:checked ~ .content > div { 
 display: none; 
} 
.nav2:checked ~ .content > div:last-child { 
 display: block; 
} 
.nav li.active { 
 background: #ff7300; 
 color: #fff; 
} 
.content .default { 
 display: block; 
}

target 偽類實現純 CSS Tab 切換

知識點:

1、要使用 :target 偽元素，需要 HTML 錨點，以及錨點對應的 HTML 片段

2、核心是使用 :target 偽類接收點擊事件

3、通過兄弟選擇符 ~ 控制樣式

<div class="container"> 
 <div id="content1" class="active">tab 1內容:123456</div> 
 <div id="content2">tab 2內容:abcdefgkijkl</div> 
 
 <ul class='nav'> 
 <li class="active"><a href="#content1">tab1</a></li> 
 <li><a href="#content2">tab2</a></li> 
 </ul> 
 
 <div class="wrap"></div> 
</div>

添加樣式

.container *{ 
 padding: 0; 
 margin: 0; 
} 
.container { 
 position: relative; 
 width: 400px; 
 margin: 50px auto; 
} 
 
.nav { 
 position: relative; 
 overflow: hidden; 
} 
 
li { 
 width: 200px; 
 float: left; 
 text-align: center; 
 background: #ddd; 
 list-style: none; 
} 
 
li a { 
 display: block; 
 width: 200px; 
 line-height: 36px; 
 font-size: 18px; 
 cursor: pointer; 
 text-decoration: none; 
 color: #000; 
} 
 
#content1, 
#content2 { 
 position: absolute; 
 overflow: hidden; 
 top: 36px; 
 width: 400px; 
 height: 100px; 
 border: 1px solid #999; 
 box-sizing: border-box; 
 padding: 10px; 
} 
 
#content1, 
#content2 { 
 display: none; 
 width: 100%; 
 background: #fff; 
} 
 
#content1:target, 
#content2:target { 
 display: block; 
} 
 
#content1.active { 
 display: block; 
} 
 
.active ~ .nav li:first-child { 
 background: #ff7300; 
 color: #fff; 
} 
 
#content1:target ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
#content1:target ~ .nav li:first-child { 
 background: #ff7300; 
 color: #fff; 
} 
 
#content2:target ~ .nav li { 
 background: #ddd; 
 color: #000; 
} 
#content2:target ~ .nav li:last-child { 
 background: #ff7300; 
 color: #fff; 
} 
 
.wrap { 
 position: absolute; 
 overflow: hidden; 
 top: 36px; 
 width: 400px; 
 height: 100px; 
 border: 1px solid #999; 
 box-sizing: border-box; 
}

focus-within 來實現 tab 切換功能

:focus-within 它表示一個元素獲得焦點，或該元素的后代元素獲得焦點。

重點：它或它的后代獲得焦點。

這也就意味著，它或它的后代獲得焦點，都可以觸發 :focus-within。

知識點

1、這個屬性有點類似 Javascript 的事件冒泡，從可獲焦元素開始一直冒泡到根元素 html，都可以接收觸發 :focus-within 事件

2、本例子的思路就是通過獲焦態來控制其他選擇器，以及最重要的是利用了父級的 :not(:focus-within) 來設置默認樣式

<div class="container"> 
 <div class="nav-box"> 
 <button class="nav1">tab1</button> 
 <button class="nav2">tab2</button> 
 <div class="content-box"> 
 <div class="content1"> 
 content-1 
 </div> 
 <div class="content2"> 
 content-2 
 </div> 
 </div> 
 </div> 
</div>

添加樣式

.container { 
 width: 300px; 
 margin: 50px auto; 
 padding: 10px; 
 boder: 1px solid #ddd; 
} 
 
.nav-box { 
 font-size: 0; 
} 
 
button { 
 width: 150px; 
 height: 40px; 
 box-sizing: border-box; 
 outline: none; 
 background: #fff; 
 border: 1px solid #ddd; 
 font-size: 18px; 
 cursor: pointer; 
} 
 
button:focus-within { 
 color: #fff; 
 background: #ff7300; 
} 
 
.content-box { 
 font-size: 24px; 
 border: 1px solid #ddd; 
 height: 100px; 
} 
.content-box div { 
 display: none; 
} 
 
.nav-box:not(:focus-within) .nav1 { 
 color: #fff; 
 background: #ff7300; 
} 
.nav-box:not(:focus-within) .content1 { 
 display: block; 
} 
 
.nav1:focus-within ~ .content-box .content1 { 
 display: block; 
} 
 
.nav2:focus-within ~ .content-box .content2 { 
 display: block; 
}

3種純CSS方式實現Tab 切換

這個效果就很差一些，因為，在tab失去焦點時，就會復原，回到tab1上面，并不推薦這種方式來實現。小編推薦第一種:checked實現方式，更容易理解。