3.关闭京东广告栏

时间 2019-11-21
标签关闭京东广告栏繁體版
原文原文链接
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         * {  8             padding: 0;  9             margin: 0; 10  } 11         .top-banner { 12             background-color: pink; 13  height: 80px; 14  } 15  .w { 16  width: 1210px; 17  margin: 10px auto; 18  position: relative; 19  } 20  img { 21  width: 1210px; 22  height: 80px; 23             background-color: blue; 24  } 25  a { 26  position: absolute; 27  top: 5px; 28  right: 5px; 29  color: #fff; 30             background-color: #000; 31             text-decoration: none; 32  width: 20px; 33  height: 20px; 34             font: 700 14px/20px "simsum";
35             text-align: center; 36  } 37  .hide { 38             display: none!important; 39  } 40     </style>
41     <!--<script>-->
42         <!--window.onload = function () {-->
43             <!-- -->
44         <!--}-->
45     <!--</script>-->
46 </head>
47 <body>
48     <div class="top-banner" id="topBanner">
49         <div class="w">
50             <img src="" alt=""/>
51             <a href="#" id="closeBanner">×</a>
52         </div>
53     </div>
54 
55 
56 <script>
57     //需求：点击案例，隐藏盒子。
58     //思路：点击a连接，让top-banner这个盒子隐藏起来（加隐藏类名）。
59     //步骤：
60     //1.获取事件源和相关元素
61     //2.绑定事件
62     //3.书写事件驱动程序
63 
64 
65     //1.获取事件源和相关元素
66     var closeBanner = document.getElementById("closeBanner"); 67     var topBanner = document.getElementById("topBanner"); 68     //2.绑定事件
69     closeBanner.onclick = function () { 70         //3.书写事件驱动程序
71 // console.log(1);
72         //类控制
73 // topBanner.className += " hide"; //保留原类名，添加新类名
74         topBanner.className = "hide";//替换旧类名
75 // topBanner.style.display = "none";
76  } 77 
78 </script>
79 </body>
80 </html>