css3实现tab切换效果

最新推荐文章于 2025-06-25 15:24:59 发布

神奇程序员

最新推荐文章于 2025-06-25 15:24:59 发布

阅读量4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 CSS css3 文章标签： css3 前端

本文链接：https://blog.youkuaiyun.com/qq_37581115/article/details/90340935

前端同时被 3 个专栏收录

14 篇文章

订阅专栏

CSS

4 篇文章

订阅专栏

css3

1 篇文章

订阅专栏

程序员用代码交流：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css3 tab切换</title>
    <!--角标-->
    <link rel="shortcut icon" href="https://www.kaisir.cn/icon/favicon.ico">
    <style>
        /* 根据target的特性锚链接到对应的div,再根据z-index的属性，改变div的层级关系，从而实现tab的切换效果！*/
        .tabmenu {
            position: absolute;
            top: 100%;
            margin: 0;
        }

        .tabmenu li {
            display: inline-block;
        }

        .tabmenu li a {
            display: block;
            padding: 5px 10px;
            margin: 0 10px 0 0;
            border: 1px solid #91a7b4;
            border-radius: 0 0 5px 5px;
            background: #e3f1f8;
            color: #333;
            text-decoration: none;
        }

        .tablist {
            position: relative;
            margin: 50px auto;
            min-height: 200px;
        }

        .tab_content {
            position: absolute;
            width: 600px;
            height: 170px;
            padding: 15px;
            border: 1px solid #91a7b4;
            border-radius: 3px;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
            font-size: 1.2em;
            line-height: 1.5em;
            color: #666;
            background: #fff;
        }
        /*使用css3(:target属性实现)，z-index控制元素层级*/
        #tab1:target, #tab2:target, #tab3:target {
            z-index: 1;
        }
    </style>
</head>
<body>
<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>

</body>
</html>

之前用js控制元素的显隐来实现tab切换效果，现在用css3来实现，省去了很多代码，化繁为简！