实现思路
- 给tab li选项绑定点击事件
- 给点击的对象加 类名,其他的兄弟移除掉类名
- 获取当前点击的对象的索引
- 通过索引找到对应的内容栏让让显示出来,其他的兄弟隐藏
核心JS代码:
$(function () {
// 给tab li选项绑定点击事件
$('.tab_list li').click(function () {
// 给点击的对象加 类名,其他的兄弟移除掉类名
$(this).addClass('current').siblings().removeClass('current')
// 获取当前点击的对象的索引
const index = $(this).index()
console.log(index);
// 通过索引找到对应的内容栏让让显示出来,其他的兄弟隐藏
$('.tab_con .item').eq(index).show().siblings().hide()
})
})
HTML结构:
<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>
CSS样式:
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
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_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>