3 分钟，纯 CSS 实现一个 tabs 组件

前端训练营：1v1私教，终身辅导计划，帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer

Hello，大家好，我是 Sunday。

tabs 组件是在日常开发中的常见组件，很多同学表示：组件库的 tabs 不好看，自己实现又不知道怎么去做。

所以说，今天，咱们就花上几分钟的时间，通过纯 css 的方式来实现一个 tabs 组件，以帮助大家完成自定义 tabs 组件的逻辑。

html 部分

先上代码：

这里需要 注意：在 html 部分需要设计成 input + label 的形式，而不能使用 div 的方案。

核心原因有两点：

1. input[type='radio'] 元素天生就具有 互斥性，即只能选中一个。这使得在实现多选一的标签页功能时非常简便和自然，无需手动管理状态。
2. 当选择某个标签页时，其对应的 radio 按钮会被选中，而 CSS 可以通过 :checked 伪类来捕捉这一状态的变化，从而触发样式变化，比如滑块的移动、文本颜色的变化等。

整个 HTML 结构设计逻辑如下：

• container：最外层容器，用于包裹整个标签页组件。
• tabs：用于包含标签页的所有内容，包括input、label和glider滑块。
• input[type='radio']：作为标签页的控制器，决定哪个标签页被选中。每个标签页对应一个radio按钮，三个input元素的id和label元素的for属性配对，使得点击label可以选择对应的radio按钮。
• label.tab：每个标签页的实际显示部分，包括文字和可选的通知标记notification。
• glider：滑块，用于在标签页切换时移动，表示当前选择的标签页。

CSS样式

• body：在body中添加了padding，使页面内容离顶部和边界有一定的距离，便于演示。
• tabs：设置了tabs容器的宽度（152px），使用flex布局，子元素排列在一行。容器具有一定的阴影效果和圆角，使其更具层次感。

• 将tabs内部的所有元素的z-index设置为2，确保这些元素位于滑块（glider）之上。

• 隐藏radio按钮，只保留它们的功能，不显示在页面上。

• 每个标签页label.tab设置了固定的大小，字体样式和颜色。使用flex布局使文本居中，边角圆滑，鼠标悬停时呈现为点击手势。使用transition实现颜色过渡效果。

• notification是标签页上的小圆点，用于显示通知数量。设置了大小、位置、字体大小和颜色。transition使背景色和位置的变化更为平滑。

• 当radio按钮被选中时，相应的label颜色变为蓝色，通知标记的背景色和文本颜色也会改变。

• 通过CSS选择器，当某个radio按钮被选中时，glider滑块将根据不同的radio按钮移动相应的距离，translateX是基于父容器的宽度（这里是152px）。

• glider的样式定义了滑块的大小、位置和颜色，设置为absolute以便在容器内自由移动，transition使其移动平滑。