教你兩招用純CSS寫Tab切換

說到Tab切換,你可能首先想到的就是使用jQuery,短短几行代碼就能夠輕鬆搞定一個Tab切換。css

而今天所要分享的,是使用 0 行JS代碼來實現Tab切換!spa

具體效果以下:code

 
Tab切換

方法一:模擬單選框原理

關於模擬單選框,在我以前文章中有講到,詳情請戳→純CSS模擬單選框和複選框xml

該方法大體原理以下:blog

當用戶點擊label元素時,該label所綁定的input單選框就會被選中,同時經過使用CSS選擇器讓被選中的input元素以後的label和.content元素都加上相應的樣式。ci

具體如何實現呢?請耐心往下看...get

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屬性值相同便可。input

另外須要注意如下兩點:string

① label須要綁定input,方法就是label的for屬性值與input的id一致,這樣當點擊label元素時input單選框就會被選中
input、label和div三者是有順序的,不能隨意調換順序(緣由後面你就知道了)it

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切換

相關文章
相關標籤/搜索