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