<!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>
*{margin:0;padding:0;}
#wrap{
width:75px;
height:75px;
cursor:pointer;
}
#wrap img{
position:absolute;
display:none;
}
#wrap .on{
display:block;
}
</style>
</head>
<body>
<div id="wrap">
<img src="qiehuan1.jpg" class="on" alt="">
<img src="qiehuan2.jpg" alt="">
</div>
<script>
<!-- js改变css样式 通过添加类名方式 -->
let aImg=document.getElementsByTagName("img")
aImg[0].onclick=function(){
aImg[0].className=""
<!-- 给它为空字符串就会消失了 -->
aImg[1].className="on"
}
aImg[1].onclick=function(){
aImg[1].className=""
<!-- 同上 给它为空字符串就会消失了 -->
aImg[0].className="on"
}
</script>
</body>
</html>