共计 2626 个字符，预计需要花费 7 分钟才能阅读完成。
Hello 小伙伴们早上、中午、下午、早晨和深夜好，这里是 jsliang~
本 CSS 系列文章：
- 主推学以致用。联合面试题和工作实例，让小伙伴们深刻体验 61 个工作常见的 CSS 属性和各种 CSS 常识。
- 主推纯 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/ 处取得。
