CSS 实例系列 - 01 - Tab 滑动门
Hello 小伙伴們?cè)缟?、中午、下午、晚上和深夜?#xff0c;這里是 jsliang~
本 CSS 系列文章：
主推學(xué)以致用。結(jié)合面試題和工作實(shí)例，讓小伙伴們深入體驗(yàn) 61 個(gè)工作常見(jiàn)的 CSS 屬性和各種 CSS 知識(shí)。
主推純 CSS。盡可能使用 HTML + CSS 完成學(xué)習(xí)目的，但仍然有 “一小部分” 功能需要用到 JavaScript 知識(shí)，適合新人學(xué)習(xí) + 大佬復(fù)習(xí)。
如果文章在一些細(xì)節(jié)上沒(méi)寫(xiě)清楚或者誤導(dǎo)讀者，歡迎評(píng)論/吐槽/批判，你的點(diǎn)贊、收藏和關(guān)注是我更新的動(dòng)力 ?
更多知識(shí)分享文章可見(jiàn)：jsliang 的文檔庫(kù)
本系列知識(shí)點(diǎn)代碼可見(jiàn)：Demo —— all for one
一 前言
本篇文章目的：
[x] 通過(guò) HTML + CSS，以及簡(jiǎn)單 JS，實(shí)現(xiàn) Tab 滑動(dòng)門(mén)
線上代碼地址：
https://code.juejin.cn/pen/7187769814675357700
再次強(qiáng)烈推薦：
代碼是用來(lái)敲的，不是觀摩的，哪怕我代碼結(jié)構(gòu)非常清晰，注釋寫(xiě)得天花亂墜，只要你不動(dòng)鍵盤(pán)，這些知識(shí)你都不能徹底掌握！
二 實(shí)現(xiàn)步驟
在 code 文件夾中，新建 tab 文件夾。
code 文件夾
+?tab????????????——?案例：Tab?滑動(dòng)門(mén) +??index.js +??index.html +??index.css index.html???????——?導(dǎo)航頁(yè)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="#">滑動(dòng)門(mén)</a><!--?滑動(dòng)門(mén)?--><div?class="tab-active"></div> </div>HTML 結(jié)構(gòu)如上，它渲染如下。
因?yàn)槭堑谝粋€(gè)實(shí)例，咱們主要講講這個(gè) Tab 滑動(dòng)門(mén)咋耍起來(lái)的吧：
首先 通過(guò)一個(gè) div 包裹各個(gè) Tab 項(xiàng)，然后 使用 Flex 布局，做出橫向的 Tab 或者縱向的 Tab，最重要的是，我們利用 tab-active 來(lái)做滑動(dòng)門(mén)的要素。
在 tab-active 上，我們使用了 absolute + left 進(jìn)行定位，以區(qū)分不同選項(xiàng)的位置，并通過(guò) transition 制造動(dòng)畫(huà)效果，讓活躍態(tài)（背景色）的切換，看起來(lái)像是劃過(guò)去的。
So~
下面加上 CSS：
code/tab/index.css
/*?公共樣式?*/ html,?body?{margin:?0;padding:?0; } a?{text-decoration:?none;color:?#000; }/*?滑動(dòng)門(mén)?*/ .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; }/*?活躍樣式?-?鼠標(biāo)?hover?到指定?Item?后，需要添加?.active?來(lái)切換活躍項(xiàng)?*/ .active?{color:?#FFFFFF;transition:?color?.4s;?/*?針對(duì)?color?來(lái)實(shí)現(xiàn)動(dòng)畫(huà)?*/ }/*?滑動(dòng)門(mén)?-?鼠標(biāo)?hover?到?.active?對(duì)應(yīng)的元素后，滑動(dòng)門(mén)也需要跟著切換位置?*/ .tab-active?{z-index:?1;position:?absolute;bottom:?0;width:?110px;height:?100%;display:?inline-block;background:?deepskyblue;transition:?left?.4s;?/*?針對(duì)?left?變動(dòng)來(lái)實(shí)現(xiàn)動(dòng)畫(huà)?*/ }最后，再來(lái) “億點(diǎn)點(diǎn)” JavaScript：
code/tab/index.js
window.onload?=?()?=>?{/***?@name?移動(dòng)切換活躍態(tài)*?1、獲取所有元素*?2、移除上一個(gè)元素的?active?class*?3、添加當(dāng)前?hover?元素的?active?class*?4、切換滑動(dòng)門(mén)的?left?位置*///?上一個(gè)元素索引let?activeTabIndex?=?0;//?所有目錄項(xiàng)const?tabItems?=?document.querySelectorAll('.tab-item');//?滑動(dòng)門(mén)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?以作滑動(dòng)門(mén)tabActive.style.left?=?`${index?*?110}px`;};}); };這樣，我們就完成了 Tab 滑動(dòng)門(mén)的實(shí)現(xiàn)，詳細(xì)代碼可以前往倉(cāng)庫(kù)進(jìn)行查看。
三 小結(jié)
小伙伴們看下來(lái)有沒(méi)覺(jué)得 “過(guò)于簡(jiǎn)單”，所以這 2 天也是在糾結(jié)這樣發(fā)出來(lái)好不好。
但是沒(méi)關(guān)系，哪怕這篇文章砸了也沒(méi)關(guān)系，畢竟，我會(huì)出手~
后面的例子會(huì)逐漸難起來(lái)，并且趨于 “不好講解” 程度，因?yàn)檫^(guò)于 “細(xì)節(jié)” 了！
沖吧 2023~
四 參考文獻(xiàn)
CSDN - sunly_ - css：transition tab切換 動(dòng)態(tài)滑動(dòng)效果
不折騰的前端，和咸魚(yú)有什么區(qū)別！
覺(jué)得文章不錯(cuò)的小伙伴歡迎點(diǎn)贊/點(diǎn) Star。
如果小伙伴需要聯(lián)系 jsliang：
Github
掘金
個(gè)人聯(lián)系方式存放在 Github 首頁(yè)，歡迎一起折騰~
爭(zhēng)取打造自己成為一個(gè)充滿探索欲，喜歡折騰，樂(lè)于擴(kuò)展自己知識(shí)面的終身學(xué)習(xí)斜杠程序員。
jsliang 的文檔庫(kù)由 梁峻榮 采用 知識(shí)共享 署名-非商業(yè)性使用-相同方式共享 4.0 國(guó)際 許可協(xié)議 進(jìn)行許可。
基于 https://github.com/LiangJunrong/document-library 上的作品創(chuàng)作。
本許可協(xié)議授權(quán)之外的使用權(quán)限可以從 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 處獲得。
總結(jié)
以上是生活随笔為你收集整理的CSS 实例系列 - 01 - Tab 滑动门的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： C语言编译执行过程
- 下一篇： 解决思科 Cisco Packet Tr