我们来对比一下二者的实现部分：
原生 JS：
<script>
var lis=document.querySelectorAll('li')
var as=document.querySelectorAll('a')
for(var i=0;i<lis.length;i++){
lis[i].setAttribute('index',i) //设置自定义属性
lis[i].addEventListener('mouseover',function() {
var index=this.getAttribute('index') //获取自定义属性
for(var i=0;i<as.length;i++){
as[i].style.display='none';
}
as[index].style.display='block'
})
}
</script>jQuery：
<script>
$('.map-box li').mouseover(function(){
var index=$(this).index()
$('.img-box a').eq(index).show()
$('.img-box a').eq(index).siblings().hide()
})
</script>完整代码：
<!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>
<style>
*{
padding: 0;
margin: 0;
}
.out-box{
box-sizing: border-box;
width: 700px;
height: 500px;
margin: 100px auto;
}
.map-box{
float: left;
box-sizing: border-box;
width: 200px;
height: 500px;
background-color: rgb(129, 129, 129);
}
.img-box{
float: left;
box-sizing: border-box;
width: 500px;
height: 500px;
border: 1.5px solid;
border-left: 0;
}
.map-box ul{
width: 200px;
box-sizing: border-box;
}
.map-box ul li{
box-sizing: border-box;
width: 200px;
height: 100px;
background-color: rgb(255, 230, 131);
border: 1.5px solid;
border-bottom: 0;
list-style: none;
text-align: center;
line-height: 100px;
font-size: 27px;
font-weight: 800;
}
.map-box ul li:last-child{
border-bottom:1.5px solid;
}
.map-box ul li:hover{
background-color: rgb(202, 148, 0);
color: aliceblue;
border-color: black;
}
.img-box a{
display: inline-block;
display: none;
}
.img-box img{
width: 498px;
height: 498px;
box-sizing: border-box;
}
</style>
<script src="./jQuery.js"></script>
</head>
<body>
<div class="out-box">
<div class="map-box">
<ul>
<li>文峰塔</li>
<li>羑里城</li>
<li>岳飞庙</li>
<li>殷墟</li>
<li>文字博物馆</li>
</ul>
</div>
<div class="img-box">
<a href="javascript::" class="img1" style="display: block">
<img src="./phpto/wenfeng.jpg" alt="" >
</a>
<a href="javascript::" class="img2">
<img src="./phpto/youli.jpg" alt="">
</a>
<a href="javascript::" class="img3">
<img src="./phpto/yuefei.jpg" alt="">
</a>
<a href="javascript::" class="img4">
<img src="./phpto/yinxu.jpg" alt="">
</a>
<a href="javascript::" class="img5">
<img src="./phpto/wenzi.jpg" alt="">
</a>
</div>
</div>
<script>
$('.map-box li').mouseover(function(){
var index=$(this).index()
$('.img-box a').eq(index).show()
$('.img-box a').eq(index).siblings().hide()
})
</script>
</body>
</html>
