<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 设置区域样式 -->
<style>
/*设置展示区样式*/
.main {
width: 500px;height: 400px;border: 3px solid cyan;margin: auto;overflow: hidden;
}
/*设置按钮区域样式*/
.tip {
width: 100%;height: 30px;
}
/*设置按钮样式*/
button {
width: 30px;height: 30px; background-color: red;margin-left: 70px;color: white;
}
/*设置图片区域样式*/
.img_div {
width: 300px;height: 350px;background-color: yellow;margin: 20px auto;
}
/*设置图片样式*/
img {
width: 100%;height: 100%;background-color: pink;
}
</style>
</head>
<body>
<!-- 创建一个区域 -->
<div class="main">
<!-- 创建一个点击区域 -->
<div class="tip">
<!-- 创建4个按钮 -->
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
<!-- 创建一个放置图片的区域 -->
<div class="img_div">
<!-- 创建4张图片 -->
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
<img src="4.jpg" alt="">
</div>
</div>
</body>
<script>
// 获取元素内容
var btn = document.getElementsByTagName('button');
var imgDiv = document.getElementsByTagName('img');
// 因for循环执行完毕后，最终显示结果只能展示第四个图片，因此将全局变量i，设置为局部变量a
for (var i = 0; i < btn.length; i++) {
(function(a){
// 添加执行动作，通过鼠标显示选择图片
btn[i].onmouseover = function(){
// 当鼠标移入时先隐藏所有照片，按钮颜色保持不变
for (var j = 0; j < btn.length; j++) {
imgDiv[j].style.display = 'none';
btn[j].style.backgroundClor = 'red';
}
//改变被点击的按钮颜色，并将该按钮对应的图片展示出来
this.style.backgroundClor = 'cyan';
imgDiv[a].style.display = 'block';
}
})(i);
}
</script>
</html>
效果展示：
