JavaScript实现tab栏切换的几种常用方法

更新时间：2023年12月15日 15:51:10 作者：清风徐来。。。

这篇文章主要给大家介绍了关于JavaScript实现tab栏切换的几种常用方法,在Web开发中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的内容进行切换

    //利用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类名，实现字体变色等css样式
            this.classList.add('active')
            //同样移除tab-content结构中的active类名
            document.querySelector('.tab-content .active').classList.remove('active')
            //再对tab-content结构中item的第几个div添加active类名，实现图片的出现和消失
            //注意nth-child（）中的值必须从1开始（不要了解可以去看css的伪类选择器），i是从0开始，故要+1
            document.querySelector(`.tab-content .item:nth-child(${i+1})`).classList.add('active')
        })
    }
    //#endregion

第二种方法：利用事件委托（即事件冒泡）进行对tab栏的切换

    //利用冒泡
    //#region 
    //利用ul统一管理li，应为点击时li元素，但li身上不存在点击事件，于是便会冒泡到父级元素身上的点击事件
    //此方法减少了遍历的消耗，提高代码的效率与质量
    const ul = document.querySelector('.tab-nav ul')
    ul.addEventListener('click',(e)=>{
        //e.target.tagName获取鼠标点击对象的标签，为了区分特意加上了一个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结构联系起来，因为此时获取的是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

第三种方法：利用数组的方法，对tab栏进行切换

    //利用数组将li元素和item中的img元素进行一定的关系绑定，使其同步出现消失。
    const Nav = document.querySelectorAll('.tab-nav li')
    const Content = document.querySelectorAll('.tab-content .item')
    //此处利用es6的扩展运算符，将Nav中的所有li元素张展开放在arr这个数组中，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实现对li元素一一对应上item结构中的img
           brr[i].classList.add('active')
        })
    }

总结

到此这篇关于JavaScript实现tab栏切换的几种常用方法的文章就介绍到这了,更多相关JS实现tab栏切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS设计模式之中介者模式使用方法详解
JavaScript中介者模式是一种行为型设计模式,用于降低多个对象之间的耦合性,在中介者模式中,多个对象之间不直接相互通信,而是通过中介者进行通信, 本文就来给大家详细的介绍一下JS设计模式之中介者模式使用方法,需要的朋友可以参考下
2023-08-08
基于JavaScript实现年份数字拼图效果
时光荏苒，2022年又要收尾了，公司的年会是不是都安排上了？前几天看到一个年会抽奖系统，功能十分的强大，其中有一个年份数字的拼图效果深深的吸引了哥，决定用JS实现一下该效果，需要的可以参考一下
2022-12-12
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
这篇文章主要介绍了我要点爆”微信小程序云开发之项目建立与我的页面功能实现，本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-05-05
js校验开始时间和结束时间
这篇文章主要为大家详细介绍了js校验开始结束时间，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
javascript 节点排序 2
对支持sourceIndex的HTML文档的节点重排，使用JK提供的思路，速度至少比单纯使用nodes.sort(function(a,b){return a.sourceIndex - b.sourceIndex})这种方式快两倍
2011-01-01
微信小程序开发探究
这篇文章主要介绍了微信小程序开发探究,非常具有实用价值，需要的朋友可以参考下。
2016-12-12
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
这篇文章主要介绍了JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
JavaScript 动态加载脚本和样式的方法
这篇文章主要介绍了JavaScript 动态加载脚本和样式的方法,需要的朋友可以参考下
2015-04-04
JS中的Error对象及使用JSON.stringify()序列化Error问题
这篇文章主要介绍了JS中的Error对象及使用JSON.stringify()序列化Error问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
原生js实现类似fullpage的单页/全屏滚动
这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法，文中给出了完整的实例代码，相信对大家的理解和学习具有一定的参考价值，需要的朋友们可以参考借鉴，下面来一起看看吧。
2017-01-01