标签：
用:target伪类实现Tab切换效果真的非常简单！简单到什么程度呢？它只需要下面这些代码。
style.css：
.song-info { position: absolute; background: #fff; } #song-info:target, #song-lyricCN:target, #song-lyricEN:target { z-index: 1; }
html代码：
<div class="song-nav"> <ul class="song-menu"> <li><a href="#song-info">基本信息</a></li> <li><a href="#song-lyricCN">中文歌词</a></li> <li><a href="#song-lyricEN">英文歌词</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切换效果
（完）
标签：
原文地址：http://www.cnblogs.com/zhangbao/p/5813919.html
