jquery包链接:
https://code.jquery.com/jquery-3.6.0.min.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>点击切换</title>
<style>
*{
margin: 0;
padding: 0;
}
ol,ul,li{
list-style: none;
}
.container{
margin: 50px auto;
width: 600px;
}
ul{
display: flex;
justify-content: space-around;
}
ul li{
border: 1px solid rgb(251, 251, 252);
background-color: rgb(208, 138, 240);
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
cursor: pointer;
}
ol{
height: 400px;
position: relative;
}
ol li{
position: absolute;
top: 0;
left: 0;
display: none;
}
ol li img{
width: 100%;
height: 100%;
}
/* 选中效果 */
.active{
background-color: rgb(213, 240, 140);
}
.on{
display: block;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li class="active">图1</li>
<li>图2</li>
<li>图3</li>
</ul>
<ol>
<li class="on"><img src="image/1.jpg" alt=""></li>
<li><img src="image/2.jpg" alt=""></li>
<li><img src="image/3.jpg" alt=""></li>
</ol>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
//点击事件
$('ul li').on('click',function(){
//清除所以样式
$('li').removeClass('active')
//添加active类样式
$(this).addClass('active')
//获取点击元素索引号
let index=$(this).index()
$('ol li').removeClass('on')
//显示选中元素显示的图片
$('ol li').eq(index).addClass('on')
})
</script>
</body>
</html>