CSS tab选项卡(标签页)切换

最新推荐文章于 2025-06-19 12:40:23 发布

baiding1123

最新推荐文章于 2025-06-19 12:40:23 发布

阅读量1.1w

点赞数 7

CC 4.0 BY-SA版权

分类专栏： CSS/CSS3 文章标签： css

本文链接：https://blog.youkuaiyun.com/baiding1123/article/details/51889201

CSS/CSS3 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一种利用CSS实现的标签页切换效果，通过隐藏的input和label元素结合:checked伪类，实现不同内容的切换，并利用CSS3的transition属性完成过渡效果。

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

在github上看到一篇 You dot need JavaScript 很多效果不需要js也能做到，比如手风琴的效果，轮播，弹出的对话框，工具提示，标签页的切换，多级的下拉菜单等等，css甚至还能做游戏！
之前就看到一个用css制作的轮播的例子，这次又遇到了，所以简单记录下。
观察了那篇github中的几个例子，不难发现凡是涉及到点击事件的都是通过隐藏的input和与之关联的label 点击label触发input的checked状态触发的，再配合使用元素状态的伪类 :checked 样式就可以实现不同状态的切换，中间的过度效果还可以配合CSS3的 transition 过度效果实现。下边的一个简单的标签页的切换例子就是用这原理实现的。
页面结构

.html
<div class="tab-wrap">
  <!-- active tab on page load gets checked attribute -->
  <input type="radio" id="tab1" name="tabGroup1" class="tab" checked> <!-- 设置一个默认状态 -->
  <label for="tab1">Short</label>
  <input type="radio" id="tab2" name="tabGroup1" class="tab">
  <label for="tab2">Medium</label>
  <input type="radio" id="tab3" name="tabGroup1" class="tab">
  <label for="tab3">Long</label>
  <div class="tab__content">
    <h3>Short Section</h3>
    <p>Praesent...</p>
  </div>
  <div class="tab__content">
    <h3>Medium Section</h3>
    <p>Praesent...</p>
    <p>In...</p>
  </div>
  <div class="tab__content">
    <h3>Long Section</h3>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</div>

主要样式：

.css
.tab__content {
    padding: 10px 25px;
    background-color: transparent;
    position: absolute;
    width: 100%;
    z-index: -1;
    opacity: 0;
    left: 0;
    transform: translateY(-3px);
    border-radius: 6px;
}
/* 首先让内容部分都不可见，不占据文档流。 */

.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative; 
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0;
}

.tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0;
}

当有input在被选中的状态时，选择与input同级的内容部分元素tab__content,它的样式将被设置为可见，占据文档流同时改变它的平移的位置，因为有过度的效果，所以点击后看起来是内容是向上顶出来的。
这一部分的代码都是重复的，可以用sass预处理循环，设置一个最大值即可：

.scss
$max-tab-count: 5;
.tab {
  display: none;
  @for $i from 1 through  $max-tab-count {
    &amp;:checked:nth-of-type(#{$i}) ~ .tab__content:nth-of-type(#{$i}) {
      opacity: 1;
      transition: 0.5s opacity ease-in, 0.8s transform ease;
      position: relative;
      top: 0;
      z-index: 100;
      transform: translateY(0px);
      text-shadow: 0 0 0;
    }
  }
}