JavaScript實(shí)現(xiàn)tab欄切換的幾種常用方法
更新時(shí)間：2023年12月15日 15:51:10 作者：清風(fēng)徐來(lái)。。。
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)tab欄切換的幾種常用方法,在Web開(kāi)發(fā)中Tab切換是一個(gè)常見(jiàn)的功能,它允許用戶在不同的頁(yè)面部分之間進(jìn)行切換,需要的朋友可以參考下
整篇文章的基本html結(jié)構(gòu)和css樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tab{
width: 500px;
height: 300px;
border: 1px solid #cfc7c7;
}
.tab-nav{
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px;
}
.tab-nav .active{
color: red;
border-bottom: 1px solid red;
}
.tab-nav ul{
width: 300px;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
margin-right: 40px;
}
.tab-nav ul li{
margin-right: 10px;
}
.tab-content{
width: 340px;
height:190px;
background-color: aquamarine;
margin-top: -20px;
margin-left: 120px;
position: relative;
}
.item {
width: 100%;
height: 100%;
position: absolute;
}
.item img{
width: 100%;
height: 100%;
display: none;
}
.active img{
display: block;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-nav">
<h3>每日特價(jià)</h3>
<ul>
<!-- data-id對(duì)li元素添加自定義id屬性 -->
<li class="active" data-id="0">精選</li>
<li data-id="1">美食</li>
<li data-id="2">百貨</li>
<li data-id="3">預(yù)告</li>
</ul>
</div>
<div class="tab-content">
<div class="item active"><img src="素材圖/js輪播圖/pic01.jpg" alt=""></div>
<div class="item"><img src="素材圖/js輪播圖/pic02.jpg" alt=""></div>
<div class="item"><img src="素材圖/js輪播圖/pic03.jpg" alt=""></div>
<div class="item"><img src="素材圖/js輪播圖/pic04.jpg" alt=""></div>
</div>
</div>
</body>第一種方法：利用js控制 css的樣式進(jìn)行對(duì)tab的內(nèi)容進(jìn)行切換
//利用css樣式進(jìn)行變換
//#region
const Nav = document.querySelectorAll('.tab-nav li')
for (let i = 0; i < Nav.length; i++) {
Nav[i].addEventListener('click',function(){
//尋找class='.active'的結(jié)構(gòu)，并將結(jié)構(gòu)中的該類名取消
document.querySelector('.tab-nav .active').classList.remove('active')
//在對(duì)點(diǎn)擊對(duì)象的li中添加active類名，實(shí)現(xiàn)字體變色等css樣式
this.classList.add('active')
//同樣移除tab-content結(jié)構(gòu)中的active類名
document.querySelector('.tab-content .active').classList.remove('active')
//再對(duì)tab-content結(jié)構(gòu)中item的第幾個(gè)div添加active類名，實(shí)現(xiàn)圖片的出現(xiàn)和消失
//注意nth-child（）中的值必須從1開(kāi)始（不要了解可以去看css的偽類選擇器），i是從0開(kāi)始，故要+1
document.querySelector(`.tab-content .item:nth-child(${i+1})`).classList.add('active')
})
}
//#endregion第二種方法：利用事件委托（即事件冒泡）進(jìn)行對(duì)tab欄的切換
//利用冒泡
//#region
//利用ul統(tǒng)一管理li，應(yīng)為點(diǎn)擊時(shí)li元素，但li身上不存在點(diǎn)擊事件，于是便會(huì)冒泡到父級(jí)元素身上的點(diǎn)擊事件
//此方法減少了遍歷的消耗，提高代碼的效率與質(zhì)量
const ul = document.querySelector('.tab-nav ul')
ul.addEventListener('click',(e)=>{
//e.target.tagName獲取鼠標(biāo)點(diǎn)擊對(duì)象的標(biāo)簽，為了區(qū)分特意加上了一個(gè)p標(biāo)簽，p不參與切換
if (e.target.tagName === 'LI') {
document.querySelector('.tab-nav .active').classList.remove('active')
//e.target獲取鼠標(biāo)點(diǎn)擊對(duì)象
e.target.classList.add('active')
//此時(shí)難點(diǎn)就在于，如何將ul中的li元素和item結(jié)構(gòu)聯(lián)系起來(lái)，因?yàn)榇藭r(shí)獲取的是ul結(jié)構(gòu)。
//本文里利用的是自定義屬性，對(duì)li元素設(shè)置id屬性
//利用變量i獲取點(diǎn)擊li元素身上的id屬性
const i =Number(e.target.dataset.id)
//注意此處i是字符串型，必須進(jìn)行轉(zhuǎn)換下面代碼的i+1才能使用
document.querySelector('.tab-content .active').classList.remove('active')
document.querySelector(`.tab-content .item:nth-child(${i+1})`).classList.add('active')
}
})
//#endregion第三種方法：利用數(shù)組的方法，對(duì)tab欄進(jìn)行切換
//利用數(shù)組將li元素和item中的img元素進(jìn)行一定的關(guān)系綁定，使其同步出現(xiàn)消失。
const Nav = document.querySelectorAll('.tab-nav li')
const Content = document.querySelectorAll('.tab-content .item')
//此處利用es6的擴(kuò)展運(yùn)算符，將Nav中的所有l(wèi)i元素張展開(kāi)放在arr這個(gè)數(shù)組中，brr同理
let arr = [...Nav]
let brr = [...Content]
for (let i = 0; i <arr.length; i++) {
arr[i].addEventListener('click',function(){
document.querySelector('.tab-nav .active').classList.remove('active')
this.classList.add('active')
document.querySelector('.tab-content .active').classList.remove('active')
//如此通過(guò)變量i實(shí)現(xiàn)對(duì)li元素一一對(duì)應(yīng)上item結(jié)構(gòu)中的img
brr[i].classList.add('active')
})
}總結(jié)
到此這篇關(guān)于JavaScript實(shí)現(xiàn)tab欄切換的幾種常用方法的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)tab欄切換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
MVVM模式中ViewModel和View、Model有什么區(qū)別？
這篇文章主要介紹了MVVM模式中ViewModel和View、Model有什么區(qū)別？本文分別解釋了它們的功能和作用,然后總結(jié)了它之間的區(qū)別,需要的朋友可以參考下
2015-06-06 
Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲(chǔ)數(shù)據(jù)庫(kù)（mysql）傻瓜式教程（一）
這篇文章主要介紹了Express實(shí)現(xiàn)前端后端通信上傳圖片存儲(chǔ)數(shù)據(jù)庫(kù)（mysql）傻瓜式教程（一）,需要的朋友可以參考下
2015-12-12 
javascript使用Promise對(duì)象實(shí)現(xiàn)異步編程
這篇文章主要介紹了javascript使用Promise對(duì)象實(shí)現(xiàn)異步編程的相關(guān)資料,需要的朋友可以參考下
2016-03-03 
IE中createElement需要注意的一個(gè)問(wèn)題
最近有讀者求助，說(shuō)在iframe中，創(chuàng)建一個(gè)元素，然后添加到父頁(yè)面中在ie6，ie7中行不通，而firefox和IE8可以。
2010-07-07 
layui實(shí)現(xiàn)點(diǎn)擊按鈕給table添加一行
想實(shí)現(xiàn)點(diǎn)擊按鈕在表格添加一行的功能，但發(fā)現(xiàn)layui并未集成該工具欄，因此，需要自己手動(dòng)添加這個(gè)功能；這篇文章主要介紹了layui點(diǎn)擊按鈕給table添加一行,需要的朋友可以參考下
2018-08-08 
JavaScript 加號(hào)(+)運(yùn)算符號(hào)
在一些框架中看到了類似這樣的寫法:+new Date();感覺(jué)有些怪,查閱了相關(guān)資料和一些網(wǎng)友的幫助.對(duì)此用法解釋如下,希望對(duì)大家有所幫助,不合適的地方請(qǐng)大家指正!
2009-12-12 
這篇文章主要介紹了三種流行的前端導(dǎo)出PDF的組件和方法,分別是jsPDF、pdfMake和Print.js,每個(gè)庫(kù)都有其特點(diǎn)和適用場(chǎng)景,可以根據(jù)具體需求選擇合適的庫(kù),需要的朋友可以參考下
2025-02-02 
這篇文章主要詳細(xì)介紹了javascript表單驗(yàn)證和Window，并附上了示例代碼，非常使用，對(duì)于我們更好的了解表單驗(yàn)證和Window很有幫助，這里推薦給大家
2014-12-12 
Boostrap模態(tài)窗口的學(xué)習(xí)小結(jié)
Bootstrap Modals（模態(tài)框）是使用定制的 Jquery 插件創(chuàng)建的。它可以用來(lái)創(chuàng)建模態(tài)窗口豐富用戶體驗(yàn)，或者為用戶添加實(shí)用功能。您可以在 Modals（模態(tài)框）中使用 Popover（彈出框）和 Tooltip（工具提示插件）
2016-03-03