首页 > 代码库 > CSS3 :target伪类实现Tab切换效果
CSS3 :target伪类实现Tab切换效果
用: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切换效果
（完）
CSS3 :target伪类实现Tab切换效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。