HTML结构如上，渲染如下。因为是第一个例子，所以主要说说Tab滑门的工作原理：先把每个Tab项通过一个div包裹起来，然后用Flex布局做成水平Tab或者垂直Tab。最重要的是，我们使用tab-active来制作推拉门的元素。在tab-active上，我们使用absolute+left进行定位，区分不同选项的位置，通过transition制作动画效果，让active状态（背景色）开关看起来像是被滑动了一样。所以~在下面添加CSS：code/tab/index.css/*publicstyle*/html,body{margin:0;填充：0；}a{文本装饰：无；color:#000;}/*滑动门*/.tab{position:relative;显示：弹性；证明内容：flex-start；对齐项目：居中；宽度：100vw；高度：60px；border-bottom:2pxsolid#ccc;box-shadow:0px2px6px0pxrgba(9,23,49,0.21);}.tab-item{z-index:2;显示：弹性；证明内容：居中；对齐项目：居中；高度：100%；宽度：90px；padding:010px;}/*activestyle-鼠标悬停到指定item后，需要加上.active来切换activeitem*/.active{color:#FFFFFF;过渡：颜色.4s；/*实现颜色动画*/}/*滑门-鼠标悬停到.active对应的元素后，滑门也需要切换位置*/.tab-active{z-index:1;位置：绝对；底部：0；宽度：110px；高度：100%；显示：内联块；背景：深天蓝；过渡：左.4s；/*实现左侧变化的动画*/}最后，来到“十亿点”JavaScript:code/tab/index.jswindow.onload=()=>{/***@namemobileswitchactivestate*1,getallelements*2，去掉前一个元素的活动class*3.添加当前悬停元素的active类*4.切换滑动门的左侧位置*///上一个元素的索引letactiveTabIndex=0;//所有目录项consttabItems=document.querySelectorAll('.tab-item');//滑动门consttabActive=document.querySelector('.tab-active');tabItems.forEach((item,index)=>{item.onmouseover=(e)=>{tabItems[activeTabIndex].classList.remove('active');e.target.classList.add('active');//switchactiveelementindexactiveTabIndex=index;//滑动门向左切换tabActive.style.left=`${index*110}px`;};});};这样，我们就完成了Tab推拉门的实现。详细代码可以在仓库查看。我也在想这样发出去好不好。不过没关系，就算这篇文章被砸了也没关系，毕竟我要出手了~后面的例子会逐渐变难，而且往往会“难以解释”，因为它们是太“详细”了！Let'sgo2023~4参考资料CSDN-sunny_-css:transitiontabswitching动态滑动效果不用折腾前端，和咸鱼有什么区别！觉得文章不错的朋友欢迎点赞/star。如需联系jsliang：Github掘金个人联系方式保存在Github主页，欢迎一起折腾~努力把自己打造成一个充满探索欲、喜欢折腾、乐于折腾的终身学习斜杠程序员扩展你的知识。jsliang的文档库由JunrongLiang根据CreativeCommonsAttribution-NonCommercial-ShareAlike4.0InternationalLicense授权。
基于https://github.com/LiangJunrong/document-library上的作品。
非本许可协议授权的使用权可从https://creativecommons.org/licenses/by-nc-sa/2.5/cn/获取。