不用 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)前活動的目標(biāo)元素。當(dāng)然 URL 末尾帶有錨名稱 #，就可以指向文檔內(nèi)某個(gè)具體的元素。這個(gè)被鏈接的元素就是目標(biāo)元素(target element)。它需要一個(gè) id 去匹配文檔中的 target 。

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

發(fā)表評論 共有條評論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表