純CSS製作單頁Web應用

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

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

<!--HTML關鍵程式碼-->
<nav class="tab">
    <ul>
        <li><a href="#page1">頁面一</a></li>
        <li><a href="#page2">頁面二</a></li>
        <li><a href="#page3">頁面三</a></li>
    </ul>
</nav>
<div class="tab-cont">
    <ul>
        <li id="page1">頁面一</li>
        <li id="page2">頁面二</li>
        <li id="page3">頁面三</li>
    </ul>
</div>

/*CSS關鍵程式碼*/
.tab-cont ul li{ opacity: 0;}
.tab-cont ul li:target{ opacity: 1;}
.tab-cont ul li:nth-child(1){ opacity: 1; }

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

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