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.cssindex.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/ 处取得。