image
效果图
image
原理
我们知道, tab 切换的特点就是当前只有一个显示的内容, 其余都是不可见的, 也就是说当前只有一个 "选中" 的对象, 因此我们可以借助 input 的 radio 类型进行 "捕获" 用户到底点了哪个 tab;
结构很简单, 隐藏的 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
来源: http://www.jianshu.com/p/9bdd5cf8aab3