你可能不知道的css骚操作 — tab切换😁

image

效果图

image

原理

我们知道，tab切换的特点就是当前只有一个显示的内容，其余都是不可见的，也就是说当前只有一个“选中”的对象，因此我们可以借助input的radio类型进行“捕获”用户到底点了哪个tab；

html

结构很简单，隐藏的input、标签列表、内容列表；

<section class="container">
  <!-- 隐藏的radio（默认选中第一项，id是给label用的） -->
  <input class="nav1" id="nav1" type="radio" name="nav" checked>
  <input class="nav2" id="nav2" type="radio" name="nav">

  <!-- 标签列表 -->
  <ul class="navs">
    <li>
      <label for="li1">标签1</label>
    </li>
    <li>
      <label for="li2">标签2</label>
    </li>
  </ul>

  <!-- 内容列表 -->
  <ul class="contents">
    <li>我是内容1</li>
    <li>我是内容2</li>
  </ul>
</section>

css

$main: #807af1;

input {
  display: none;
}

// 标签列表
.navs {
  display: flex;
  list-style: none;

  li {
    padding: 10px;
  }
}

// 内容列表（默认隐藏，选中的才显示）
.contents {
  li {
    display: none;
    padding: 10px;
  }
}

// 标签选中的样式（大家可以配合类名使用for循环，这里写死两个标签）
.nav1:checked~.navs li:first-child,
.nav2:checked~.navs li:last-child {
  color: $main;
  border-bottom: 1px solid $main;
}

// 内容显示样式
.nav1:checked~.contents li:first-child,
.nav2:checked~.contents li:last-child {
  display: block;
}

过渡动画

代码附加在指定位置即可

// 内容列表
.contents {
  li {
    animation: fade .5s cubic-bezier(0.075, 0.82, 0.165, 1); // 内容切换动画（可选）
  }
}

// 内容切换动画（可选）
@keyframes fade {
  from {
    transform: translateX(20px);
    opacity: 0
  }

  to {
    transform: translateX(0);
    opacity: 1
  }
}

往期系列

这个系列会放许多你不知道的css骚操作，敬请期待！

如果你喜欢这篇文章，请别忘记点个赞或者关注哦🍟

image

欢迎关注「不会写前端」，我会不定时更新最新、实用的前端技术性文章或者技巧，未来可期.​