不用 Javascript，使用純 CSS 方案，實(shí)現(xiàn)類似下圖的導(dǎo)航欄切換：

CSS 的強(qiáng)大之處有的時(shí)候超乎我們的想象，Tab 切換，常規(guī)而言確實(shí)需要用到一定的腳本才能實(shí)現(xiàn)。下面看看如何使用 CSS 完成同樣的事情。

實(shí)現(xiàn) Tab 切換的難點(diǎn)在于如何使用 CSS 接收到用戶的點(diǎn)擊事情并對相關(guān)的節(jié)點(diǎn)進(jìn)行操作。即是：

如何接收點(diǎn)擊事件

如何操作相關(guān)DOM

下面看看如何使用兩種不同的方法實(shí)現(xiàn)需求：

法一：:target 偽類選擇器

首先，我們要解決的問題是如何接收點(diǎn)擊事件，這里第一種方法我們采用 :target 偽類接收。

:target 是 CSS3 新增的一個(gè)偽類，可用于選取當(dāng)前活動(dòng)的目標(biāo)元素。當(dāng)然 URL 末尾帶有錨名稱 #，就可以指向文檔內(nèi)某個(gè)具體的元素。這個(gè)被鏈接的元素就是目標(biāo)元素(target element)。它需要一個(gè) id 去匹配文檔中的 target 。

解釋很難理解，看看實(shí)際的使用情況，假設(shè)我們的 HTML 代碼如下：

由于要使用 :target，需要 HTML 錨點(diǎn)，以及錨點(diǎn)對應(yīng)的 HTML 片段。所以上面的結(jié)構(gòu)要變成：

這樣，上面 <a href="#content1"> 中的錨點(diǎn) #content1 就對應(yīng)了列表1 <div id="content1"> 。錨點(diǎn)2與之相同對應(yīng)列表2。

接下來，我們就可以使用 :target 接受到點(diǎn)擊事件，并操作對應(yīng)的 DOM 了：

上面的 CSS 代碼，一開始頁面中的 #content1 與 #content2 都是隱藏的，當(dāng)點(diǎn)擊列表1觸發(fā)href="#content1" 時(shí)，頁面的 URL 會發(fā)生變化：

由 www.example.com 變成 www.example.com#content1

接下來會觸發(fā) #content1:target{ } 這條 CSS 規(guī)則，#content1 元素由 display:none 變成display:block ，點(diǎn)擊列表2亦是如此。

如此即達(dá)到了 Tab 切換。當(dāng)然除了 content1 content2 的切換，我們的 li 元素樣式也要不斷變化，這個(gè)時(shí)候，就需要我們在 DOM 結(jié)構(gòu)布局的時(shí)候多留心，在 #content1:target 觸發(fā)的時(shí)候可以同時(shí)去修改 li 的樣式。

在上面 HTML 的基礎(chǔ)上，再修改一下，變成如下結(jié)構(gòu)：

仔細(xì)對比一下與上面結(jié)構(gòu)的異同，這里我只是將 ul 從兩個(gè) content 上面挪到了下面，為什么要這樣做呢？

因?yàn)檫@里需要使用兄弟選擇符 ~ 。

E~F{ cssRules } ，CSS3 兄弟選擇符(E~F) ，選擇 E 元素后面的所有兄弟元素 F。

注意這里，最重要的一句話是 E~F 只能選擇 E 元素 之后 的 F 元素，所以順序就顯得很重要了。

在這樣調(diào)換位置之后，通過兄弟選擇符 ~ 可以操作整個(gè) .nav 的樣式。

上面的 CSS 規(guī)則中，我們使用 ~ 選擇符，在 #content1:target 和 #content2:target 觸發(fā)的時(shí)候分別去控制兩個(gè)導(dǎo)航 li 元素的樣式。

至此兩個(gè)問題，1. 如何接收點(diǎn)擊事件 與 2. 如何操作相關(guān)DOM 都已經(jīng)解決，剩下的是一些小樣式的修補(bǔ)工作。

Demo戳我：純CSS導(dǎo)航切換(:target偽類實(shí)現(xiàn))

法二：<input type="radio"> && <label for="">

上面的方法通過添加 <a> 標(biāo)簽添加頁面錨點(diǎn)的方式接收點(diǎn)擊事件。

這里還有一種方式能夠接收到點(diǎn)擊事件，就是擁有 checked 屬性的表單元素， <input type="radio"> 或者<input type="checkbox"> 。

假設(shè)有這樣的結(jié)構(gòu)：

對于上面的結(jié)構(gòu)，當(dāng)我們點(diǎn)擊 <input class="nav1" type="radio"> 單選框表單元素的時(shí)候，使用 :checked是可以捕獲到點(diǎn)擊事件的。

同樣用到了兄弟選擇符 ~

這樣，當(dāng)接收到表單元素的點(diǎn)擊事件時(shí)，可以通過兄弟選擇符 ~ 操作它的兄弟元素的樣式。

可以試著點(diǎn)擊下面 codepen 中的單選框。

但是，這里有個(gè)問題 我們的 Tab 切換，要點(diǎn)擊的是<li>元素，而不是表單元素，所以這里很重要的一點(diǎn)是，使用 <label for=""> 綁定表單元素?？纯慈缦陆Y(jié)構(gòu)：

通過使用 <label> 包裹一個(gè) <li> 元素，而 <label> 有一個(gè)屬性 for 可以綁定一個(gè)表單元素。

上面的 <li> 中，有一層 <label for="li"> ，里面的 for="li1" 意思是綁定 id 為li1 的表單元素。

label 標(biāo)簽中的 for 定義：for 屬性規(guī)定 label 與哪個(gè)表單元素綁定。

這樣改造之后，當(dāng)我們點(diǎn)擊 <li> 元素的時(shí)候，相當(dāng)于點(diǎn)擊了 <input class="nav1" id="li1" type="radio">這個(gè)單選框表單元素，而這個(gè)表單元素被點(diǎn)擊選中的時(shí)候，又可以被 :checked 偽類捕獲到。

這個(gè)時(shí)候，我們就可以將頁面上的表單元素隱藏，做到點(diǎn)擊 <li> 相當(dāng)于點(diǎn)擊表單：

這樣，應(yīng)用到本題目，我們應(yīng)該建立如下 DOM 結(jié)構(gòu)：

使用兩個(gè)單選框，分別對應(yīng)兩個(gè)導(dǎo)航選項(xiàng)，運(yùn)用上面介紹的 label 綁定表單，:checked 接收點(diǎn)擊事件，可以得到第二解法。

看看最后的結(jié)果：

Demo戳我：純CSS導(dǎo)航切換(label 綁定 input:radio && ~)

所有題目匯總在我的 Github ，發(fā)到博客希望得到更多的交流。

最新評論