自己只会适用原生js来实现
<!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="jquery.min.js"></script>
<style>
.box {
position: relative;
width: 200px;
height: 150px;
background-color: pink;
border: 1px solid rgb(247, 155, 170);
overflow: hidden;
}
.nav {
width: 60px;
height: 152px;
background-color: grey;
}
.nav li {
list-style: none;
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: pink;
border: 1px solid rgb(247, 155, 170);
margin-top: -1px;
margin-left: -1px;
}
.nav ul {
padding-left: 0px;
width: 60px;
height: 150px;
margin-top: 0px;
}
.img {
position: absolute;
top: 0px;
left: 60px;
background-color: rgb(223, 203, 203);
width: 140px;
height: 150px
}
.img img {
width: 100%;
height: 100%;
display: none
}
</style>
</head>
<body>
<div class="box">
<div class="nav">
<ul>
<li>女鞋
</li>
<li>男鞋</li>
<li>上衣</li>
<li>下衣</li>
<li>厨具</li>
</ul>
</div>
<div class="img">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FoBmDIZzo8rcQ80fqVvxSPA.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650031805&t=0f059238f8eacdc6a7e47b50771d4caf"
alt="" class="tu1">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg12.360buyimg.com%2Fn1%2Fjfs%2Ft1%2F138967%2F7%2F21440%2F61290%2F6143001dE4829ca4d%2Ff35d802aceddf760.jpg&refer=http%3A%2F%2Fimg12.360buyimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650032113&t=2ea8f02af98cd03a62344788d8dec13e"
alt="" class="tu2">
<img src="http://t15.baidu.com/it/u=1918065371,3055478553&fm=224&app=112&f=JPEG?w=500&h=500" alt="" class="tu3">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.cfw.cn%2Feditors%2Fattached%2Fimage%2F20190712%2F20190712095512375.jpg&refer=http%3A%2F%2Fimg1.cfw.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650032162&t=c54e0aaa3ebd78afee8cdc56da641347"
alt="" class="tu4">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgservice.suning.cn%2Fuimg1%2Fb2c%2Fimage%2FIAPaNTjLeHGl379iETkINw.jpg_800w_800h_4e&refer=http%3A%2F%2Fimgservice.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650032186&t=8c80d833cb6035a51b2cd4528ac89218"
alt="" class="tu5">
</div>
</div>
<script>
// $(function() {
// //点击某个栏目,相应的图片就显示出来
// $('ul>li').click(function() {
// })
// })
//原生js实现
var lis = document.querySelectorAll('li')
var imgs = document.querySelectorAll('img')
for (i = 0; i < lis.length; i++) {
//给每个图片添加自定义属性--错应该是给每个li自定义一个属性做为img的索引号
// imgs[i].setAttribute('index', i)
lis[i].setAttribute('index', i)
}
//首先默认第一个图片显示
imgs[0].style.display = 'block'
//添加点击事件
for (i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function() {
// console.log(this.getAttribute('index'))
for (i = 0; i < lis.length; i++) {
imgs[i].style.display = 'none'
lis[i].style.color = ''
}
imgs[this.getAttribute('index')].style.display = 'block'
this.style.color = 'red'
})
}
</script>
</body>
</html>
jQuery实现:
核心:鼠标经过左侧盒子某个li时,就让内容区盒子相对应的图片显示,其余图片隐藏
需要得到当前li的索引号,就可以显示对应索引号的图片
jQuery得到当前元素的索引号$(this).index( )
中间对应的图片,可以通过eq(index)方法去选择
显示元素show() 隐藏元素hide()
$(function() { //入口函数
//经过某个栏目,相应的图片就显示出来
$('.img img').eq(0).show()
$('ul>li').mouseover(function() {
//得到当前li的索引号
var index = $(this).index()
//让相应索引号的图片显示
console.log($('.img img').eq(index))
$('.img img').hide()
$('.img img').eq(index).show()
})
})
$(function() { //入口函数
//经过某个栏目,相应的图片就显示出来
$('.img img').eq(0).show()
$('ul>li').mouseover(function() {
//得到当前li的索引号
var index = $(this).index()
//让相应索引号的图片显示
console.log($('.img img').eq(index))
// $('.img img').hide()
$('.img img').eq(index).show()
//让其余的图片隐藏
$('.img img').eq(index).siblings().hide()
})
})
一样的用到排他思想