<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.maxCommon {
background-color: pink;
height: 80px;
}
.content {
width: 1210px;
margin: 10px auto;
position: relative;
}
img {
width: 1210px;
height: 80px;
background-color: blue;
}
a {
position: absolute;
top: 5px;
right: 5px;
color: #fff;
background-color: #000;
text-decoration: none;
width: 20px;
height: 20px;
font: 700 14px/20px "simsum";
text-align: center;
}
.hide {
display: none!important;
}
</style>
</head>
<body>
<div class="maxCommon" id="common">
<div class="content">
<img src="" alt=""/>
<a href="#" id="closeBanner">×</a>
</div>
</div>
<script>
//需求：点击案例，隐藏盒子。
//思路：点击a链接，让maxCommon这个盒子隐藏起来（加隐藏类名）。
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和相关元素
var closeBanner = document.getElementById("closeBanner");
var common = document.getElementById("common");
//2.绑定事件
closeBanner.onclick = function () {
//3.书写事件驱动程序
// console.log(1);
//类控制
// common.className += " hide"; //保留原类名，添加新类名
common.className = "hide";//替换旧类名
// common.style.display = "none";
}
</script>
</body>
</html>
关闭广告栏
