在网页中经常会出现广告,如下图1,点击×就可以实现将广告给删除,如图2
此问题有多种解法,此处将在JS中实现此操作
1. 删除操作在×这个图片上实现的,所以在×这个地方安插点击事件
2. 当点击×之后当前的广告就会消失,则广告这个盒子的display为none,代码如下:
<!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>
.a{
height: 200px;
width: 190px;
}
.small{
background-image: url(wrong.jpg);
width: 15px;
height: 15px;
background-repeat: no-repeat;
float: left;
}
.big{
background-image: url(tb.jpg);
width: 175px;
height: 175px;
background-repeat: no-repeat;
float: right;
display: table;
}
</style>
</head>
<body>
<div class="a">
<div class="small"></div>
<div class="big"></div>
</div>
<script>
var s=document.querySelector('.small');
var b=document.querySelector('.big');
var a=document.querySelector('.a');
s.onclick=function(){
this.style.display='none';
b.style.display='none';
}
</script>
</body>
</html>