乐趣区

关于前端:CSS-实例系列-01-Tab-滑动门

jiezi

Hello 小伙伴们早上、中午、下午、早晨和深夜好，这里是 jsliang~

本 CSS 系列文章：

  1. 主推学以致用。联合面试题和工作实例，让小伙伴们深刻体验 61 个工作常见的 CSS 属性和各种 CSS 常识。
  2. 主推纯 CSS。尽可能应用 HTML + CSS 实现学习目标，但依然有“一小部分”性能须要用到 JavaScript 常识，适宜新人学习 + 大佬温习。

如果文章在一些细节上没写分明或者误导读者，欢送评论 / 吐槽 / 批评，你的点赞、珍藏和关注是我更新的能源 ❤

  • 更多常识分享文章可见：jsliang 的文档库
  • 本系列知识点代码可见：Demo —— all for one

一 前言

本篇文章目标：

  • [x] 通过 HTML + CSS，以及简略 JS，实现 Tab 滑动门

线上代码地址：

https://code.juejin.cn/pen/71…

再次强烈推荐：

代码是用来敲的，不是观摩的，哪怕我代码构造十分清晰，正文写得天花乱坠，只有你不动键盘，这些常识你都不能彻底把握！

二 实现步骤

在 code 文件夹中，新建 tab 文件夹。

code 文件夹

+ tab            —— 案例：Tab 滑动门
+  index.js
+  index.html
+  index.css
index.html       —— 导航页

2.1 代码主体解说

code/tab/index.html

<div class="tab">
  <a class="tab-item active" href="#">Flex 布局 </a>
  <a class="tab-item" href="#"> 下拉面板 </a>
  <a class="tab-item" href="#"> 滑动门 </a>
  <!-- 滑动门 -->
  <div class="tab-active"></div>
</div>

HTML 构造如上，它渲染如下。

因为是第一个实例，咱们次要讲讲这个 Tab 滑动门咋耍起来的吧：

首先 通过一个 div 包裹各个 Tab 项， 而后 应用 Flex 布局，做出横向的 Tab 或者纵向的 Tab， 最重要的是，咱们利用 tab-active 来做滑动门的因素。

在 tab-active 上，咱们应用了 absolute + left 进行定位，以辨别不同选项的地位，并通过 transition 制作动画成果，让沉闷态（背景色）的切换，看起来像是划过去的。

So~

上面加上 CSS：

code/tab/index.css

/* 公共款式 */
html, body {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: #000;
}

/* 滑动门 */
.tab {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 60px;
  border-bottom: 2px solid #ccc;
  box-shadow: 0px 2px 6px 0px rgba(9, 23, 49, 0.21);
}
.tab-item {
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 90px;
  padding: 0 10px;
}

/* 沉闷款式 - 鼠标 hover 到指定 Item 后，须要增加 .active 来切换沉闷项 */
.active {
  color: #FFFFFF;
  transition: color .4s; /* 针对 color 来实现动画 */
}

/* 滑动门 - 鼠标 hover 到 .active 对应的元素后，滑动门也须要跟着切换地位 */
.tab-active {
  z-index: 1;
  position: absolute;
  bottom: 0;
  width: 110px;
  height: 100%;
  display: inline-block;
  background: deepskyblue;
  transition: left .4s; /* 针对 left 变动来实现动画 */
}

最初，再来“亿点点”JavaScript：

code/tab/index.js

window.onload = () => {
  /**
   * @name 挪动切换沉闷态
   * 1、获取所有元素
   * 2、移除上一个元素的 active class
   * 3、增加以后 hover 元素的 active class
   * 4、切换滑动门的 left 地位
  */
  // 上一个元素索引
  let activeTabIndex = 0;
  // 所有目录项
  const tabItems = document.querySelectorAll('.tab-item');
  // 滑动门
  const tabActive = document.querySelector('.tab-active');
  tabItems.forEach((item, index) => {item.onmouseover = (e) => {tabItems[activeTabIndex].classList.remove('active');
      e.target.classList.add('active');
      // 切换沉闷元素索引
      activeTabIndex = index;
      // 切换 left 以作滑动门
      tabActive.style.left = `${index * 110}px`;
    };
  });
};

这样，咱们就实现了 Tab 滑动门的实现，具体代码能够返回仓库进行查看。

三 小结

小伙伴们看下来有没感觉“过于简略”，所以这 2 天也是在纠结这样收回来好不好。

然而没关系，哪怕这篇文章砸了也没关系，毕竟，我会出手~

前面的例子会逐步难起来，并且趋于“不好解说”水平，因为过于“细节”了！

冲吧 2023~

四 参考文献

  • CSDN – sunly_ – css：transition tab 切换 动静滑动成果

不折腾的前端，和咸鱼有什么区别！

感觉文章不错的小伙伴欢送点赞 / 点 Star。

如果小伙伴须要分割 jsliang：

  • Github
  • 掘金

集体联系方式寄存在 Github 首页，欢送一起折腾~

争取打造本人成为一个充斥摸索欲，喜爱折腾，乐于扩大本人知识面的一生学习斜杠程序员。

jsliang 的文档库由 梁峻荣 采纳 常识共享 署名 - 非商业性应用 - 雷同形式共享 4.0 国内 许可协定 进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。

退出移动版