前端——tab 栏切换案例

article/2025/9/1 10:10:06

案例

当鼠标点击上面相应的选项卡（tab），下面内容跟随变化
在这里插入图片描述

分析

Tab栏切换有2个大的模块
上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想）修改类名的方式
下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。
核心思路：给上面的tab_list 里面的所有小li 添加自定义属性，属性值从0开始编号。
当我们点击tab_list 里面的某个小li，让tab_con 里面对应序号的内容显示，其余隐藏（排他思想）

代码实现

<!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>* {padding: 0;margin: 0;}li {list-style: none;}.tab {width: 666px;margin: 100px auto;}.tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item {display: none;}</style>
</head><body><div class="tab"><div class="tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价（50000）</li><li>手机社区</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品介绍模块内容</div><div class="item">规格与包装模块内容</div><div class="item">售后保障模块内容</div><div class="item">商品评价（50000）模块内容</div><div class="item">手机社区模块内容</div></div></div><script>//1.切换栏模块选项卡,点击某一个,当前这一个底色变成红色 ,其余不变(排他思想)修改类名的方式//获取元素var tab_list = document.querySelector('.tab_list');var lis = tab_list.querySelectorAll('li');var items = document.querySelectorAll('.item');//for循环绑定点击事件for (var i = 0; i < lis.length; i++) {//5个li设置索引号,给tab_list所有li添加自定义属性，属性值从0开始编号lis[i].setAttribute('index', i);lis[i].onclick = function () {//排他思想.选项卡随着被点击，类名变化  //同时下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。for (var j = 0; j < lis.length; j++) {lis[j].className = '';items[j].style.display = 'none';}this.className = 'current';var index = this.getAttribute('index');// for (var i = 0; i < items.length; i++) {//     items[i].style.display = 'none';// }//对应模块显示也用排他思想，只显示当前，其他模块隐藏items[index].style.display = 'block';}}</script>
</body></html>