- 核心原理:鼠标经过左侧盒子li,就让内容区相应图片显示,其余的图片隐藏。
- 需要得到当前li的索引号,就可以显示对应索引号的图片。
- jQuery得到当前元素索引号
$(this).index()
- 中间对应的图片,可以通过
eq(index)
方法去选择。
<!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>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('.tab_list li').mouseover(function(){
//得到当前li的索引号
var index=$(this).index();
$(this).addClass('current');
//让右侧相应索引号的图片显示
$('.tab_con div').eq(index).show();
//其余的隐藏
$('.tab_con div').eq(index).siblings().hide();
$(this).siblings().removeClass('current');
})
})
</script>
<style>
.tab_list {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list ul{
list-style: none;
}
.current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.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">商品评价模块内容</div>
</div>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/82bc9571f8d1382005150ca1d3ffc8e3.png)