不用JavaScript 纯 CSS Tab 切换

关注

原创最新推荐文章于 2026-07-04 10:28:04 发布 587 阅读 AI 写同款· GEO 优化 ›

纯CSS打造双层Tab css实现的双层嵌套Tab标签页。一般来说，使用纯CSS实现Tab页面效果的常用方式是a标签和:target结合，但是这样实现有一个强迫症的地方：由于是使用a标签把页面“链接”到某个指定ID的元素上，因此浏览器的URL里会出现[#ID]的情况。而且，使用a标签也不好控制Tab导航按钮选中后的样式。阅读详情

使用 :checked 来实现 tab 切换功能。
实现 Tab 切换的难点在于如何使用 CSS 接收到用户的点击事情并对相关的节点进行操作。
拥有 checked 属性的表单元素， <input type="radio"> 或者 <input type="checkbox"> 能够接收到点击事件。

HTML：

<div class="container">
    <input class="nav1" id="li1" type="radio" name="nav">
    <input class="nav2" id="li2" type="radio" name="nav">
    <ul class='nav'>
        <li class='active'><label for="li1">列表1</label></li>
        <li><label for="li2">列表2</label></li>
    </ul>
    <div class="content">
        <div class="content1 default">列表1内容:123456</div>
        <div class="content2">列表2内容:abcdefgkijkl</div>
    </div>
</div>

SCSS：

.container{
    position:relative;
    width:400px;
    margin: 50px auto;
}

input{
    display:none;
}

.nav{
    position:relative;
    overflow:hidden;
}

li{
    width:200px;
    float:left;
    text-align:center;
    background:#ddd;
}

li label{
    display:block;
    width:200px;
    line-height:36px;
    font-size:18px;
    cursor:pointer;
}

.content{
    position:relative;
    overflow:hidden;
    width:400px;
    height:100px;
    border:1px solid #999;
    box-sizing:border-box;
    padding:10px;
}

.content1,
.content2{
    display:none;
    width:100%;
    height:100%;
}

.nav1:checked ~ .nav li {
    background:#ddd;
    color:#000;
    
    &:first-child{
        background:#ff7300;
        color:#fff;
    }
}
.nav2:checked ~ .nav li{
    background:#ddd;
    color:#000;
    
    &:last-child{
        background:#ff7300;
        color:#fff;
    }
}

.nav1:checked ~ .content > div{
    display:none;
    
    &:first-child{
    display:block;
    }
}
.nav2:checked ~ .content > div{
    display:none;
    
    &:last-child{
    display:block;
    }
}

.active {
        background:#ff7300;
        color:#fff;
}

.default{
    display:block;
}