主要考察的还是如何正确的获取元素的索引
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.wrapper{
width: 298px;
height: 248px;
border: 1px solid black;
overflow: hidden;
margin: 100px auto;
}
#left,#center,#right{
float: left;
}
#left li,#right li{
background-color: pink;
}
#left li a,#right li a{
width: 48px;
height: 27px;
border-bottom: 1px solid black;
display: block;
line-height: 27px;
text-align: center;
color: #000;
}
#left li a:hover,#right li a:hover{
background-color: skyblue;
}
#center{
border-left: 1px solid black;
border-right: 1px solid black;
}
</style>
</head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女包</a></li>
<li><a href="#">男包</a></li>
<li><a href="#">女鞋</a></li>
<li><a href="#">男鞋</a></li>
<li><a href="#">女包</a></li>
<li><a href="#">男包</a></li>
<li><a href="#">女鞋</a></li>
<li><a href="#">男鞋</a></li>
<li><a href="#">女包</a></li>
</ul>
<ul id="center">
<li><a href="#"><img src="timg.jpg" alt="" width="200" height="200"></a></li>
<li><a href="#"><img src="timg (1).jpeg" alt="" width="200" height="200"></a></li>
<li><a href="#"><img src="timg.jpg" alt="" width="200" height="200"></a></li>
<li><a href="#"><img src="timg (1).jpeg" alt="" width="200" height="200"></a></li>
<li><a href="#"><img src="timg.jpg" alt="" width="200" height="200"></a></li>
<li><a href="#"><img src="timg (1).jpeg" alt="" width="200" height="200"></a></li>
<li><a href="#"><img src="timg.jpg" alt="" width="200" height="200"></a></li>
<li><a href="#"><img src="timg (1).jpeg" alt="" width="200" height="200"></a></li>
<li><a href="#"><img src="timg.jpg" alt="" width="200" height="200"></a></li>
<li><a href="#"><img src="timg (1).jpeg" alt="" width="200" height="200"></a></li>
<li><a href="#"><img src="timg.jpg" alt="" width="200" height="200"></a></li>
<li><a href="#"><img src="timg (1).jpeg" alt="" width="200" height="200"></a></li>
<li><a href="#"><img src="timg.jpg" alt="" width="200" height="200"></a></li>
<li><a href="#"><img src="timg (1).jpeg" alt="" width="200" height="200"></a></li>
<li><a href="#"><img src="timg.jpg" alt="" width="200" height="200"></a></li>
<li><a href="#"><img src="timg (1).jpeg" alt="" width="200" height="200"></a></li>
<li><a href="#"><img src="timg.jpg" alt="" width="200" height="200"></a></li>
<li><a href="#"><img src="timg (1).jpeg" alt="" width="200" height="200"></a></li>
</ul>
<ul id="right">
<li><a href="#">女包</a></li>
<li><a href="#">男包</a></li>
<li><a href="#">女鞋</a></li>
<li><a href="#">男鞋</a></li>
<li><a href="#">女包</a></li>
<li><a href="#">男包</a></li>
<li><a href="#">女鞋</a></li>
<li><a href="#">男鞋</a></li>
<li><a href="#">女包</a></li>
</ul>
</div>
</body>
</html>
<script src="jquery-3.4.1.min.js"></script>
<script>
$(function(){
//需求１．给左边的li标签们设置鼠标移入事件，让中间索引对应的li显示，其他的li隐藏
//需求２．给右边的li标签们设置鼠标移入事件，让中间索引对应的li显示，其他的li隐藏
$('#left>li').mouseenter(function(){
//获取当前鼠标移入的这个li标签的索引
var idx = $(this).index();//索引：表示这个元素在他兄弟元素之间的排行
// $('#center>li:eq('+ idx +')'); //字符串的拼接
$('#center>li').eq(idx).show().siblings('li').hide();
});
$('#right>li').mouseenter(function(){
//获取当前鼠标移入的这个li标签的索引
var idx = $(this).index();//索引：表示这个元素在他兄弟元素之间的排行
idx +=9; //不要写死，９是左边li标签的个数
// $('#center>li:eq('+ idx +')'); //字符串的拼接
$('#center>li').eq(idx).show().siblings('li').hide();
});
});
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
