當(dāng)產(chǎn)品讓我們實(shí)現(xiàn)一個(gè) tab 切換的效果時(shí)候，我們往往第一時(shí)間想到的是用 JavaScript 來(lái)實(shí)現(xiàn)切換邏輯，這已經(jīng)成為一個(gè)循規(guī)蹈矩的方式。這里我們來(lái)用另一鐘方式完全摒棄 JavaScript 用純 CSS + label for 屬性來(lái)實(shí)現(xiàn) tab 切換效果。
首先我們要了解 label 標(biāo)簽的 for 屬性
lable 標(biāo)簽的 for 屬性定義了 label 與哪個(gè)表單元素綁定如：
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
這里，for 的值映射到對(duì)應(yīng)的表單元素 input 的 id 上。也就是說(shuō)上述代碼中，label 的 for='male' 對(duì)應(yīng)了 id 為 'male' 的 input 表單。當(dāng)我們點(diǎn)擊 Male 時(shí)，相應(yīng)的 input 會(huì)被勾選上
image.png
到這里我們有沒(méi)有被啟發(fā)到呢？
這里我們用一個(gè)實(shí)際例子來(lái)講解，如何用 label 的 for 屬性來(lái)完成 tab 的切換效果。
我們定義四個(gè)菜單項(xiàng)，分別給 label 的 for 屬性不同的值。
<div class="footer-w">
<div class="footer">
<div :class="{item: true, 'item-checked':checked1}" @click="checked(1)"><label for="item-0"><i class="fa fa-home" aria-hidden="true"></i>Home</label></div>
<div :class="{item: true, 'item-checked':checked2}" @click="checked(2)"><label for="item-1"><i class="fa fa fa-file-text" aria-hidden="true"></i>Resume</label></div>
<div :class="{item: true, 'item-checked':checked3}" @click="checked(3)"><label for="item-2"><i class="fa fa fa-file" aria-hidden="true"></i>Blog</label></div>
<div :class="{item: true, 'item-checked':checked4}" @click="checked(4)"><label for="item-3"><i class="fa fa fa-heart" aria-hidden="true"></i>Contact</label></div>
</div>
</div>
然后編寫(xiě)對(duì)應(yīng)的 tab 模塊代碼
<input type="radio" name="pure-nav" id="item-0" checked="checked">
<section class="home">
<canvas id="canvas"></canvas>
<div class="content">
<img class="head-pic"src="./images/head.jpeg">
<div class="name">lele88lala</div>
</div>
</section>
<!-- resume block -->
<input type="radio" name="pure-nav" id="item-1">
<section class="resume">
<div class="r-item">
<span>標(biāo)簽:</span><span>讀書(shū)、技術(shù)宅、LOL 大神、程序媛、全棧</span>
</div>
<div class="r-item">
<span>工作經(jīng)驗(yàn):</span><span>2014.10-至今 前端 + 后端開(kāi)發(fā)</span>
</div>
<div class="r-item">
<span>技能:</span><span>JavaScript、HTML、CSS、webpack項(xiàng)目打包工具、Vue 全家桶、Java、Spring、MySQL等</span>
</div>
<div class="r-item">
<span>前端:</span><span>PC及手機(jī)端Web頁(yè)面（個(gè)人網(wǎng)站、官方網(wǎng)站、管理系統(tǒng)、商城、推廣頁(yè)面等），微信小程序小程序</span>
</div>
<div class="r-item">
<span>后端:</span><span>熟練使用Java語(yǔ)言、Maven 項(xiàng)目管理工具、github項(xiàng)目管理工具、MySQL 數(shù)據(jù)庫(kù)及數(shù)據(jù)操作指令</span>
</div>
<div class="r-item">
<span>服務(wù)器端:</span><span>熟練使用 linux 操作指令、前后端項(xiàng)目部署等</span>
</div>
<div class="r-item">
<span>愛(ài)好:</span><span>讀書(shū)、攻破知識(shí)難點(diǎn)，編寫(xiě)技術(shù)文檔，LOL</span>
</div>
</section>
<!-- contact block -->
<input type="radio" name="pure-nav" id="item-3" >
<section class="contact">
<div class="one"><span class="col">Do</span> you want to <span class="col">have</span> a personal <span class="col">website？</span></div>
<div class="one"><span class="col">Do</span> you want to <span class="col">discuss</span> technical issues <span class="col">with me？</span></div>
<div class="one"><span class="col">Then</span> contact <span class="col">me!</span></div>
<div class="one">e-mail: lele88lala@163.com</div>
<div class="one">QQ: 1207018406</div>
<div class="link">
<i class="fa fa-github" aria-hidden="true" @click="goTo('github')"></i>
<span class="jian" @click="goTo('jianshu')">簡(jiǎn)書(shū)</span>
</div>
</section>
這一哦，每一個(gè)模塊的前邊都有對(duì)應(yīng)的表單項(xiàng)，我們用 CSS 控制表單項(xiàng)
<input type="radio" name="pure-nav" id="item-3" >
然后用 CSS 實(shí)現(xiàn) input 隱藏及切換效果，部分樣式
.wrapper input[name="pure-nav"]:checked + section {
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
/* z-index: 6; */
opacity: 1;
}
最終效果
