CSS3 :target伪类实现Tab切换效果

Posted 2020-08-04 张宝的博客

用: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切换效果

 

（完）