次在講css實(shí)現(xiàn)tab切換時，有童靴留言說可以使用錨點(diǎn)實(shí)現(xiàn)，對的，就是可以使用錨點(diǎn)，然而，使用錨點(diǎn)涉及到的又有哪些關(guān)鍵技術(shù)了？今天我們以錨點(diǎn)實(shí)現(xiàn)彈窗為例來解答這個問題

一句話總結(jié)實(shí)現(xiàn)原理就是：a標(biāo)簽改變hash值觸發(fā)css3偽類target作用對應(yīng)id的dom元素。

一：講清楚:target怎么作用的

：target是CSS里一個非常有趣的偽選擇器。它在CSS里發(fā)生作用的過程是這樣的：當(dāng)瀏覽器地址里的hash（地址#號后面的部分）和：target偽選擇器指定的ID匹配上時，它的樣式就會在這個ID元素上生效。

實(shí)例dom結(jié)構(gòu)：

dom結(jié)構(gòu)比較簡單，兩個帶href為#id的a標(biāo)簽，以及兩上對應(yīng)#id后面id值作為自己id的p標(biāo)簽。下面我們給偽元素定義一個樣式：

然后，我們點(diǎn)擊#news1時p#news1元素對這個樣式生效，點(diǎn)擊#news2時p#news2元素對這個樣式生效。（結(jié)論是：target選擇器會突出顯示當(dāng)前活動的HTML錨）效果是這樣的：

好了，以上實(shí)現(xiàn)就是為了說明偽元素是這樣作用的，記住上面加粗語句就行了。下面來實(shí)現(xiàn)我們本篇要講的主題—錨點(diǎn)實(shí)現(xiàn)彈窗

二：實(shí)現(xiàn)彈窗功能

知道target是怎么作用的了，那下面這個彈窗功能就好實(shí)現(xiàn)了。

實(shí)現(xiàn)的dom結(jié)構(gòu)：

由上圖可知，兩個帶href#id的a標(biāo)簽，和兩個id等于#id的dom結(jié)構(gòu)。運(yùn)行效果是這樣的：

給target偽類定義樣式：

這個樣式的作用是將dom從不顯示變成顯示。

當(dāng)我們點(diǎn)擊“點(diǎn)擊我”按鈕時，通過錨點(diǎn)改變hash值在通過偽類target將id="popup1"的dom添加偽類定義的樣式。結(jié)果是這樣的：

當(dāng)點(diǎn)擊浮層上的叉時，關(guān)閉這個浮層，原理也是一樣的（改變hash引起偽類失效）。

當(dāng)我們點(diǎn)擊“也點(diǎn)擊我嘛”按鈕時，同樣通過錨點(diǎn)改變hash值在通過偽類target將id="popup2"的dom添加偽類定義的樣。效果是這樣的：

只是這種情況將設(shè)置關(guān)閉的div.cancel設(shè)置成了全局寬度，層級在浮層下。所以通過點(diǎn)擊浮層外的區(qū)域就關(guān)閉了浮層，關(guān)閉原理是一樣的。

三：寫在后面的總結(jié)

CSS3的target這個屬性，雖然所有的主流瀏覽器都支持，除了IE8及以下的版本，但是現(xiàn)在使用這種技術(shù)的人還是比較少，其實(shí)，如果不是太注重動態(tài)效果，使用這種瀏覽器原生技術(shù)來修飾你的應(yīng)用也是不錯的選擇。

短內(nèi)容，說完整事，哪怕只讀一篇也能學(xué)知識。點(diǎn)擊關(guān)注小鄭搞碼事，說的都是那堆代碼。謝謝您的鼓勵！