CSS 例項系列 - 01 - Tab 滑動門

jsliang發表於2023-01-13
CSS

Hello 小夥伴們早上、中午、下午、晚上和深夜好，這裡是 jsliang~

本 CSS 系列文章：

  1. 主推學以致用。結合面試題和工作例項，讓小夥伴們深入體驗 61 個工作常見的 CSS 屬性和各種 CSS 知識。
  2. 主推純 CSS。儘可能使用 HTML + CSS 完成學習目的，但仍然有 “一小部分” 功能需要用到 JavaScript 知識，適合新人學習 + 大佬複習。

如果文章在一些細節上沒寫清楚或者誤導讀者，歡迎評論/吐槽/批判，你的點贊、收藏和關注是我更新的動力 ❤

一 前言

本篇文章目的：

  • [x] 透過 HTML + CSS，以及簡單 JS，實現 Tab 滑動門

01-01.gif

線上程式碼地址：

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 結構如上，它渲染如下。

01-02.png

因為是第一個例項，我們們主要講講這個 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 變動來實現動畫 */
}

01-03.png

最後，再來 “億點點” 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 滑動門的實現，詳細程式碼可以前往倉庫進行檢視。

01-01.gif

三 小結

小夥伴們看下來有沒覺得 “過於簡單”，所以這 2 天也是在糾結這樣發出來好不好。

但是沒關係，哪怕這篇文章砸了也沒關係，畢竟，我會出手~

後面的例子會逐漸難起來，並且趨於 “不好講解” 程度，因為過於 “細節” 了！

衝吧 2023~

四 參考文獻

不折騰的前端，和鹹魚有什麼區別！

覺得文章不錯的小夥伴歡迎點贊/點 Star。

如果小夥伴需要聯絡 jsliang：

個人聯絡方式存放在 Github 首頁，歡迎一起折騰~

爭取打造自己成為一個充滿探索欲，喜歡折騰，樂於擴充套件自己知識面的終身學習斜槓程式設計師。

jsliang 的文件庫由 梁峻榮 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議 進行許可。<br/>基於 https://github.com/LiangJunrong/document-library 上的作品創作。<br/>本許可協議授權之外的使用許可權可以從 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 處獲得。

相關文章