jQuery简单的tab切换
案例分析（步骤）：
1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
addClass() 添加类、siblings()兄弟节点、removeClass()移除类
2、点击的同时，得到当前的索引号
$(this).index() 得到当前的索引号
3、让下面相应索引号的item显示，其余的item隐藏
eq(index) 索引号为index的元素，索引号index从0开始、show()显示元素、hide()隐藏元素
完整案例：
<!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>tab栏切换</title>
<script src="/jquery-3.6.0.min.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.tab_list ul {
display: flex;
list-style: none;
}
.tab_list ul li {
height: 25px;
line-height: 25px;
padding: 10px 30px;
border: 1px solid red;
}
.tab_con .item {
display: none;
}
.current {
background-color: red;
color: aliceblue;
}
</style>
<body>
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价</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">
商品评价内容
</div>
<div class="item">
手机社区内容
</div>
</div>
<script>
$(function () {
// 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
$(".tab_list li").click(function () {
// 链式编程 当前li添加类，其余兄弟移除类
$(this).addClass('current').siblings().removeClass('current');
// 2、拿到当前点击的索引号
var index = $(this).index();
// 3、下面index对应的模块显示，其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
})
});
</script>
</body>
</html>
效果展示：
