怎么用純css實(shí)現(xiàn)Tab切換？ – css筆記

css實(shí)現(xiàn)依賴于html結(jié)構(gòu)，因?yàn)閏ss選擇器有限，有子選擇器，沒有父選擇器，有后選擇器，沒有前選擇器，所以局限性很大。所以當(dāng)我們思考能否用css來實(shí)現(xiàn)時(shí)還應(yīng)考慮到html的結(jié)構(gòu)，能不能構(gòu)造出滿足css已存在的選擇器的html布局

前言

哪些簡(jiǎn)單的效果可以考慮用css來實(shí)現(xiàn)呢，目前css能夠做的交互有

• 鼠標(biāo)經(jīng)過/離開：hover
• 鼠標(biāo)點(diǎn)擊：:cheked

那是不是上述所有的交互都可以用css來實(shí)現(xiàn)呢？顯然不是的，css實(shí)現(xiàn)依賴于html結(jié)構(gòu)，因?yàn)閏ss選擇器有限，有子選擇器，沒有父選擇器，有后選擇器，沒有前選擇器，所以局限性很大。所以當(dāng)我們思考能否用css來實(shí)現(xiàn)時(shí)還應(yīng)考慮到html的結(jié)構(gòu)，能不能構(gòu)造出滿足css已存在的選擇器的html布局。

• 原文來源：詳情

效果展示；

先從html結(jié)構(gòu)說起

一般在碰到tab類型的組件時(shí)，一般會(huì)有如下的html

<div class="tabs">
  <div class="tab-nav">
    <div class="tab-item">tab01</div>
    <div class="tab-item">tab02</div>
    <div class="tab-item">tab03</div>
  </div>
  <div class="tab-content">
    <div>111</div>
    <div>222</div>
    <div>333</div>
  </div>
</div>

大致就是這種布局吧，暫且稱作分離模式吧，足夠靈活，就是導(dǎo)航部分和內(nèi)容結(jié)構(gòu)分開，需要什么動(dòng)畫效果都可以分別實(shí)現(xiàn)。

還有一種布局，大概是這樣的

<div class="tabs">
  <div class="tab-pane">
    <div class="tab-item">tab01</div>
    <div class="tab-content">111</div>
  </div>
  <div class="tab-pane">
    <div class="tab-item">tab01</div>
    <div class="tab-content">111</div>
  </div>
  <div class="tab-pane">
    <div class="tab-item">tab01</div>
    <div class="tab-content">111</div>
  </div>
</div>

這里每一個(gè)tab里面的導(dǎo)航和內(nèi)容是一起的，我們稱為合并模式吧，這種在組件化里面很常見，比如在react里面，一個(gè)tab組件，一般會(huì)寫成這樣

ReactDOM.render(
  <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>,
mountNode);

是不是很像？

相信用js只要是一名合格的前端都能輕易的實(shí)現(xiàn)吧，這里我們主要是研究如何用css來實(shí)現(xiàn)

第一種布局（分離模式）

這里有兩種思路

1. 錨點(diǎn)實(shí)現(xiàn)?herf?+?:target
2. css3?nth-child(n)?選擇器

錨點(diǎn)實(shí)現(xiàn)主要是在a標(biāo)簽加上href屬性，然后目標(biāo)元素上添加相同的id，當(dāng)點(diǎn)擊a標(biāo)簽時(shí)，目標(biāo)元素的:target就生效了

<style>
#item01:target{ background:red }
</style>
<a href="#item01">跳轉(zhuǎn)</a>
<div id="item01">內(nèi)容</div>

這種方式可以將導(dǎo)航和內(nèi)容鏈接到一塊，但是在瀏覽器中有一個(gè)很不友好的地方，就是當(dāng)點(diǎn)擊帶有錨點(diǎn)的a鏈接的時(shí)候，瀏覽器會(huì)自動(dòng)定位到目標(biāo)位置，很影響體驗(yàn)，需要去掉這種效果估計(jì)還得借助js來實(shí)現(xiàn)，故不太推薦用這種方式

nth-child(n)?選擇器，這種方式就比較傳統(tǒng)了，不過導(dǎo)航切換部分還是用到label+input[type=radio]，實(shí)現(xiàn)基本和js是同一個(gè)思路，甚至還不如js方便，因?yàn)槟阌卸嗌賯€(gè)tab選項(xiàng)就得寫多少個(gè)nth-child樣式

.tab-nav input:nth-of-type(1):checked ~ .tab-content :nth-of-type(1),
.tab-nav input:nth-of-type(2):checked ~ .tab-content :nth-of-type(2),
.tab-nav input:nth-of-type(3):checked ~ .tab-content :nth-of-type(3),
...
{
  z-index:1
}

你大概會(huì)看到這樣的樣式，如果選項(xiàng)卡比較固定，基本是靜態(tài)的，比較少，可以一一寫出來，如果比較多，或者是js生成的，那么建議這一部分樣式也通過js生成出來。

下面著重來實(shí)現(xiàn)第二種布局

第二種布局（合并模式）

如果是這樣一種布局，那么導(dǎo)航和內(nèi)容就可以通過相鄰選擇器+聯(lián)系上了，重點(diǎn)是如何實(shí)現(xiàn)選項(xiàng)卡的樣式，當(dāng)然，我們也需要改一下html

<div class="tabs">
  <div class="tab-pane">
    <input type="radio" name="tab" id="tab01"/>
    <label class="tab-item" for="tab01">tab01</label>
    <div class="tab-content">111</div>
  </div>
  <div class="tab-pane">
    <input type="radio" name="tab" id="tab02"/>
    <label class="tab-item" for="tab02">tab02</label>
    <div class="tab-content">222</div>
  </div>
  <div class="tab-pane">
    <input type="radio" name="tab" id="tab03"/>
    <label class="tab-item" for="tab03">tab03</label>
    <div class="tab-content">333</div>
  </div>
</div>

然后我們通過樣式美化一下

.tabs{
  position:relative;
  width:400px;
  height:300px;
}
.tab-pane{
  display:inline-block;
}
.tabs input[type='radio']{
  position:absolute;
  clip:rect(0,0,0,0)
}
.tab-item{
  display:block;
  height:34px;
  line-height:34px;
  cursor:pointer;
  padding:0 10px
}

.tab-content{
  position:absolute;
  border:1px solid #eee;
  padding:20px;
  left:0;
  top:36px;
  bottom:0;
  right:0;
  background:#fff;
}

然后加入交互，主要就是相鄰選擇器+和:checked選擇器，

.tabs input[type='radio']:checked+.tab-item{/**導(dǎo)航選中狀態(tài)**/
  background:orangered;
  color:#fff
}
.tabs input[type='radio']:checked+.tab-item+.tab-content{/**當(dāng)前內(nèi)容切換**/
  z-index:1
}

我們這里只用了z-index:1就實(shí)現(xiàn)了隱藏顯示，當(dāng)然還可以實(shí)現(xiàn)更多的效果，比如淡入淡出等

演示效果見頁(yè)底Demo2

當(dāng)然，這種方式也有一定的不足，由于這里內(nèi)容區(qū)域用到了絕對(duì)定位，所以整個(gè)tab容器就不能根據(jù)里層的內(nèi)容來自適應(yīng)，也需要給外層一個(gè)固定的高度，不然整個(gè)tab容器就只有頂部導(dǎo)航區(qū)域才占據(jù)空間，這明顯就不合常理。

添加一點(diǎn)動(dòng)畫效果

/**給導(dǎo)航添加橫條的縮放效果**/
.tab-item:after{
  position:absolute;
  content:'';
  height:3px;
  width:100%;
  background:orangered;
  left:0;
  bottom:2px;
  transition:.3s;
  transform:scaleX(0)
}

.tabs input[type='radio']:checked+.tab-item:after{
  transform:scaleX(1)
}
/**給內(nèi)容區(qū)域添加一個(gè)淡入淡出的效果**/
.tab-content{
  position:absolute;
  background:#eee;
  padding:20px;
  left:0;
  top:36px;
  bottom:0;
  right:0;
  transition:.3s;
  opacity:0;
  transform:translateY(50px)
}

.tabs input[type='radio']:checked+.tab-item+.tab-content{
  z-index:1;
  opacity:1;
  transform:translateY(0)
}

演示效果見頁(yè)底Demo3

小節(jié)

通過css我們也能實(shí)現(xiàn)導(dǎo)航效果，而且更容易復(fù)用，只需要復(fù)制html結(jié)構(gòu)就行（當(dāng)然這里肯定也是需要改一下name和id的）。這就有點(diǎn)類似組件的意思了，給你一個(gè)html結(jié)構(gòu)，你不需要關(guān)系切換邏輯，只需要根據(jù)接口取到數(shù)據(jù)，然后塞到每個(gè)tab標(biāo)簽頁(yè)里面去，事實(shí)上現(xiàn)在react實(shí)現(xiàn)的組件也一般都是這種思路，只需關(guān)注業(yè)務(wù)邏輯，但這些都是大工程，哪里有css直接來的快。

這就讓我想到了剛進(jìn)公司那會(huì)，每碰到一個(gè)tab，那就要取一個(gè)id，然后用jquery實(shí)現(xiàn)一遍tab切換邏輯，后來放聰明了，把tab封裝成一個(gè)插件，碰到一個(gè)tab就調(diào)用一次插件…看著代碼變少了，其實(shí)也沒什么本質(zhì)區(qū)別。

用css來實(shí)現(xiàn)的好處就是可以盡量大的把組件功能和業(yè)務(wù)邏輯分離開來，真正做一個(gè)UI組件該做的事，希望css越來越好