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

浅浅的花香味﹌ 2024-04-17 06:29 73阅读 0赞

## 效果图 ##

## 原理 ##

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

## html ##

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

<section class="container">
      
      <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 ##

这里用的是scss预处理器:

$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
      }
    }
    复制代码

## 往期推荐 ##

[contenteditable跟user-modify还能这么玩?][contenteditable_user-modify]

[css掩人耳目式海浪动效?，这可能是最简单的实现方式了吧？️][css]

[你可能不知道的css骚操作 — 表单验证?️][css_ _]

[用css实现一个switch组件原来这么简单][css_switch]

[html指令式实现tooltip文字提示，纯css实现（无脚本）️][html_tooltip_css]

## 最后 ##

本文到此结束，希望以上内容对你有些许帮助，如若喜欢请记得点个`赞`跟`关注`哦 ?

微信公众号 `「不会写前端」`，将不定时更新最新、实用的前端技巧/技术性文章，欢迎关注，一起学习 ?

转载于:https://juejin.im/post/5d44144be51d4561ff6667ba

[contenteditable_user-modify]: https://juejin.im/post/5d5003396fb9a06b265088c0
[css]: https://juejin.im/post/5d4c01dbf265da03e61afcfd
[css_ _]: https://juejin.im/post/5d47fb156fb9a06ad16f56bc
[css_switch]: https://juejin.im/post/5d47a665e51d453c11684bff
[html_tooltip_css]: https://juejin.im/post/5d2e82976fb9a07ef4443b30