纯CSS打造双层Tab

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

原创

最新推荐文章于 2025-06-25 15:24:59 发布 · 5.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #标签 #导航 #css3

本文介绍如何使用纯CSS创建双层Tab导航，通过利用radio button和label的for属性，实现美观的Tab切换效果。文章详细讲解了单层Tab和双层Tab的实现思路，包括如何处理显示和隐藏内容的问题，并提供了相应的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写代码前的准备

1、复习一下CSS选择器：
CSS选择器详解（一）
CSS选择器详解（二·伪类）

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

一组Tab标签页面可以看做是一组互斥的按钮：反正我每次都只能有一个按钮处于选中的状态。是不是觉得这个性质就像某个熟悉的html元素？对，就是单选按钮啊！单选按钮有一个伪类是:checked，更方便调整按钮选中后的样式啊！

所以这篇博客采用的方式是：

HTML: <input type="radio" />
CSS:  xxx:checked{}

单层Tab实现

实现思路

有了开头部分的提示，思路应该就比较清晰了：使用一组radio button，选中某个选项的时候就展示这个选项对应的页面。
那么问题来了，咱们都知道，radio button自带的样式（小灰圈中间一个点）简直丑哭，不同的浏览器还有不同的渲染效果，而且很明显，想要拿CSS把这个丑哭的小灰圈感动成大方框中间还带字儿的那种效果显然不容易啊。不怕，网上那么多的美好的单选按钮样式也不是只能出现在设计师们的PSD中的啊，是时候拿出lable标签这个大法宝了。

<lable>: 定义和用法
<label>标签为 input 元素定义标注（标记）。
<label> 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在< label> 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。

也就是说，我们可以通过<lable>标签的for属性，把<lable>和对应的单选按钮绑定起来，通过点击<lable>标签来改变单选按钮的选中和取消状态，通过给<lable>添加样式来实现美化按钮的效果。
那么问题又来了，单选按钮的样式问题解决了，那该怎么把每个Tab下要显示的内容和单选按钮联系起来？很简单，有一个神奇的选择器：

相邻元素选择器 +

效果图

选中第一个Tab页
选中第三个Tab页

代码

代码全放上来啦，偷懒的小伙伴们直接复制粘贴就可以用啦。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>纯CSS实现双层tab</title>
    <style >
      .container{
        background-color: #2cb0a2;
        height: 300px;
        width: 500px;
        margin: 50px auto;
        padding: 30px;
        color: white;
        border-radius: 10px;
        box-shadow: 10px 30px 20px #ccc;
      }
      .tab-container{
        position: relative;
      }
      .tab-radio{
        display: none;
      }
      .tab-lable{
        display: inline-block;
        height: 50px;
        width: 100px;
        line-height: 50px;
        margin:0;
        text-align: center;
        background-color: rgba(255,255,255,0.5);