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/7187769814675357700

再次強烈推薦：

代碼是用來敲的，不是觀摩的，哪怕我代碼結構非常清晰，注釋寫得天花亂墜，只要你不動鍵盤，這些知識你都不能徹底掌握！

二 實現步驟

在 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 國際 許可協議 進行許可。
基于 https://github.com/LiangJunrong/document-library 上的作品創作。
本許可協議授權之外的使用權限可以從 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 處獲得。

總結

以上是生活随笔為你收集整理的CSS 实例系列 - 01 - Tab 滑动门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。