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栏切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了three.js 实现露珠滴落动画效果的示例代码,非常不错，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-03
响应式网站设计(Responsive Web design)是一种网络页面设计布局,是目前比较流行的一种网页设计,下面这篇文章主要给大家介绍了关于three.js响应式设计的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
项目中经常会遇到缩略展示文字的场景,即要求文字在一行不换行展示,超出自动展示...,常用的展示效果有两种,文字中间缩略以及文字末尾缩略,本文将通过代码示例给大家详细的讲一下这两种方案,需要的朋友可以参考下2024-06-06
JavaScript实现日期加减计算功能代码实例，因为在js中没有类似C#中的AddDays方法，所以要想实现日期加减的话，就需要自己写函数来实现。2015-05-05
JS常见疑难点分析之match，charAt，charCodeAt，map，search用法分析
这篇文章主要介绍了JS常见疑难点分析之match，charAt，charCodeAt，map，search用法,结合实例形式较为详细的分析了match，charAt，charCodeAt，map，search的功能,使用方法与相关注意事项,需要的朋友可以参考下2016-12-12
Array()是我们在js中常常写到的代码，今天就总结哈Array的对象具有哪些方法，感兴趣的朋友可以了解下2013-08-08
这篇文章主要推荐了10 款 SVG 动画的 JavaScript 库，非常的实用，效果也非常棒，有需要的朋友可以参考下。2015-03-03
这篇文章主要介绍了SWFObject基本用法,实例分析了SWFObject操作Flash文件的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
发现我JS真的还有很多要学，下面只是我的练习作品，代码很多是网上的。2008-07-07
今天小编就为大家分享一篇对Layer UI 模块化的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最新评论