纯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及以下版本。