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

时间:2022-11-30 12:37:40

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

 

(完)