js实现tab栏切换

2024-07-13 11:16| 来源: 网络整理| 查看: 265

实现思路：（1）整个tab栏是由2个div模块组成，分别是头部选项栏和中间内容模块（蓝色框）。

（2）头部选项栏点击其中任意一个，当前点击的一栏底色及字体颜色发生改变，其余不变。用排他思想实现。

（3）用for循环为头部选项栏所有元素绑定点击事件。

（4）中间的内容模块会跟随选项栏变化，因此显示隐藏的模块要放在点击事件的里边。且要满足：中间模块显示的内容要和上面的选项栏一一对应。

（5）最终达到的效果为：当我们点击头部选项栏，中间内容模块会显示对应的图片，其余的图片则会隐藏(排他思想）。

需要注意的点：1、我们一开始是将中间内容模块隐藏，此时需要在中间内容模块中添加一个展示类，使得中间模块在默认状态下内容不为空。2、由于我们采用了document.querySelectorAll()来获取元素，因此获取到的头部选项栏和中间内容模块的所有元素，类型是下标为0开始的列表，由此来实现一一对应匹配。

代码示例：

tab栏切换 * { margin: 0; padding: 0; } li { list-style: none; } .box { width: 600px; margin: 100px auto; } .box-top { overflow: hidden; width: 400px; background-color: whitesmoke; } .box-top ul li { float: left; width: 100px; height: 30px; line-height: 30px; text-align: center; } .tab li.active { background-color: #ccc; color:peru; } .box-middle { margin-top: 0; } .box-middle .item { display: none; float: left; } .box-middle .item.active { display: block; } 第一张第二张第三张第四张 //默认展示页面 // 1、获取相应的元素 let list = document.querySelectorAll('.tab .tab-item') let items = document.querySelectorAll('.box-middle .item') // 2、用for循环为tab栏所有元素添加点击事件头部tab栏切换模块(排他思想) for (let i = 0; i < list.length; i++){ list[i].addEventListener('click',function(){ document.querySelector('.tab .active').classList.remove('active') this.classList.add('active') // 3、底部显示隐藏模块要放在点击事件的里边 // 3.1、先移除 document.querySelector('.box-middle .active').classList.remove('active') // 3.2 点击哪个按钮就显示对应的底部模块 items[i].classList.add('active') // 中间模块展示图片和上面的选项栏一一对应 }) }

【本文地址】

js实现tab栏切换

js实现tab栏切换

今日新闻

推荐新闻