快捷導(dǎo)航

JavaScript實(shí)現(xiàn)tab欄切換的幾種常用方法

更新時(shí)間：2023年12月15日 15:51:10 作者：清風(fēng)徐來。。。

這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)tab欄切換的幾種常用方法,在Web開發(fā)中Tab切換是一個(gè)常見的功能,它允許用戶在不同的頁面部分之間進(jìn)行切換,需要的朋友可以參考下

整篇文章的基本html結(jié)構(gòu)和css樣式
第一種方法：利用js控制 css的樣式進(jìn)行對tab的內(nèi)容進(jìn)行切換
第二種方法：利用事件委托（即事件冒泡）進(jìn)行對tab欄的切換
第三種方法：利用數(shù)組的方法，對tab欄進(jìn)行切換
總結(jié)

整篇文章的基本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對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)行對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')
            //在對點(diǎn)擊對象的li中添加active類名，實(shí)現(xiàn)字體變色等css樣式
            this.classList.add('active')
            //同樣移除tab-content結(jié)構(gòu)中的active類名
            document.querySelector('.tab-content .active').classList.remove('active')
            //再對tab-content結(jié)構(gòu)中item的第幾個(gè)div添加active類名，實(shí)現(xiàn)圖片的出現(xiàn)和消失
            //注意nth-child（）中的值必須從1開始（不要了解可以去看css的偽類選擇器），i是從0開始，故要+1
            document.querySelector(`.tab-content .item:nth-child(${i+1})`).classList.add('active')
        })
    }
    //#endregion

第二種方法：利用事件委托（即事件冒泡）進(jìn)行對tab欄的切換

    //利用冒泡
    //#region 
    //利用ul統(tǒng)一管理li，應(yīng)為點(diǎn)擊時(shí)li元素，但li身上不存在點(diǎn)擊事件，于是便會(huì)冒泡到父級元素身上的點(diǎn)擊事件
    //此方法減少了遍歷的消耗，提高代碼的效率與質(zhì)量
    const ul = document.querySelector('.tab-nav ul')
    ul.addEventListener('click',(e)=>{
        //e.target.tagName獲取鼠標(biāo)點(diǎn)擊對象的標(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)擊對象
            e.target.classList.add('active')
            //此時(shí)難點(diǎn)就在于，如何將ul中的li元素和item結(jié)構(gòu)聯(lián)系起來，因?yàn)榇藭r(shí)獲取的是ul結(jié)構(gòu)。
            //本文里利用的是自定義屬性，對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ù)組的方法，對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元素張展開放在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')
           //如此通過變量i實(shí)現(xiàn)對li元素一一對應(yīng)上item結(jié)構(gòu)中的img
           brr[i].classList.add('active')
        })
    }