用:target伪类实现Tab切换效果真的非常简单！简单到什么程度呢？它只需要下面这些代码。
style.css：
.song-info {
position: absolute;
background: #fff;
}#song-info:target, #song-lyricCN:target, #song-lyricEN:target {
z-index:;
}
html代码：
<div class="song-nav">
<ul class="song-menu">
<li><a href="#song-info" rel="external nofollow" >基本信息</a></li>
<li><a href="#song-lyricCN" rel="external nofollow" >中文歌词</a></li>
<li><a href="#song-lyricEN" rel="external nofollow" >英文歌词</a></li>
</ul>
</div>
<div id="song-lyricCN" class="song-info">...3...</div>
<div id="song-lyricEN" class="song-info">...2...</div>
<div id="song-info" class="song-info">...1...</div>
仅仅使用position:absolute;（对切换内容应用）和:target伪类将被指向对象（target object）显示层级提升（z-index:1）来实现的。
当然了，你可能觉得代码虽然可行，但是显示效果太丑陋了，没关系，给样式就OK了。
1. 给内容添加好看的边框效果
/* 要有边框、圆角效果和边框阴影效果 */
border: 1px solid #91a7b4;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
2. 导航菜单选项单行显示
.song-menu > li {
display: inline-block;
}
3. 菜单选项也要有好看的边框，而且链接的默认下划线太丑了，我要去掉！
.song-menu > li > a {
text-decoration: none;
border: 1px solid #91a7b4;
border-radius: 0 0 5px 5px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}
注意：打开页面，首先看到的是最后一个内容框内容（也就是<div id=”song-info”>），你可以看到在导航栏里面它是第一个选项。为什么这么做呢？因为浏览器渲染页面时，由于内容是绝对布局的（position:absolute），所以后来出来的div对覆盖住前面的，所以这一点要注意，把你想第一个显示的内容div放在最后面。
参考地址：实用CSS3属性之 :target伪类实现Tab切换效果
（完）
