Css如何实现tab选项卡切换

时间2024-01-27 23:04:03发布访客分类CSS浏览823

导读：收集整理的这篇文章主要介绍了Css如何实现tab选项卡切换，觉得挺不错的，现在分享给大家，也给大家做个参考。Css实现tab选项卡切换的方法：利用target的特性，可以实现纯css的tab效果切换，代码为【#tab1:target,#ta...

收集整理的这篇文章主要介绍了Css如何实现tab选项卡切换，觉得挺不错的，现在分享给大家，也给大家做个参考。

Css实现tab选项卡切换的方法：利用target的特性，可以实现纯css的tab效果切换，代码为【#tab1:target,#tab2:target,#tab3:target{ z-index:1; } 】。

本教程操作环境：windows7系统、css3版，DELL G3电脑。

Css实现tab选项卡切换的方法：

CSS3伪类target

利用target的特性，可以实现纯css的tab效果切换

示例代码如下

代码如下:

style tyPE="text/css">
.tabmenu{
    posITion:absolute;
    top:-28px;
    left:144px;
    margin:0px;
}
.tabmenu li{
    display:inline-block;
}
.tabmenu li a{
    display:block;
    padding:5px 10px;
    margin:0 10px 0 0;
    border:1px solid #91a7b4;
    border-radius:5px 5px 0 0;
    background-color:#e3F1f8;
    color:#333;
    text-decoration: none;
    font-Size:16px;
}
.tablist{
    position:relative;
    top:200px;
    margin:0 auto;
    width:600px;
    min-height:200px;
}
.tab_content{
    position:absolute;
    width:600px;
    height:170px;
    padding:15px;
    border:1px solid #91a7b4;
    border-radius:10px;
    box-shadow:0 2px 3px rgba(0,0,0,0,1);
    font-size:16px;
    line-height:16px;
    color:#666;
    background-color:#fff;
}
#tab1:target,#tab2:target,#tab3:target{
    z-index:1;
}
    /style>
    div class="tablist">
    ul class="tabmenu">
    li>
    a href="#tab1">
    tab1/a>
    /li>
    li>
    a href="#tab2">
    tab2/a>
    /li>
    li>
    a href="#tab3">
    tab3/a>
    /li>
    /ul>
    div id="tab1" class="tab_content">
    tab1/div>
    div id="tab2" class="tab_content">
    tab2/div>
    div id="tab3" class="tab_content">
    tab3/div>
    /div>

最关键的代码

代码如下:

#tab1:target,#tab2:target,#tab3:target{
    z-index:1;
}

先根据target的特性锚链接到对应的div,再根据z-index的属性，改变div的层级关系，从而实现tab的切换效果！

target兼容性

最后提一下兼容性问题：因为这是CSS3新特性，所以不兼容老版本的浏览器，例如IE678。