純CSS製作單頁Web應用

在我之前寫的使用hash製作單頁Web應用一文中，講到使用Javascript中的location.hash來製作單頁Web應用，看到那麼長一段JS只是為了實現一個簡單的Tab切換，實在是有點大材小用了。而今天所要分享的，同樣是利用hash來實現切換，但是不同的是，這次不寫任何JS，而是使用純CSS來實現相同的效果。

這次我們主要要用到一個CSS偽類選擇器:target，它可以給id為當前頁面hash值的元素加上相應樣式，以下是樣例關鍵代碼：

當點擊class屬性值為tab的元素中的第二個a標籤時， 頁面url的hash值變為#page2，所以此時id為page2的li元素就會加上li:target中的樣式，這樣page2就顯示出來了，而其他的li會回到常態的opacity: 0樣式，這樣就實現了簡單的Tab切換。

兼容性::target偽類選擇器的兼容性還是比較好的，可以兼容目前主流瀏覽器，不兼容IE8及以下版本。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！