码迷,mamicode.com
首页 > Web开发 > 详细

JS点击

时间:2019-09-06 15:47:29      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:出现   二次   鼠标   消失   小问题   cti   script   color   range   

本来是想做一个鼠标点击事件:A,B两个东西,B先隐藏,点击A,B出现,再点一次A,B消失,然后发现在判断不同的情况下,出现了一点小问题

暂时没有问题的写法:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         #div1{
 8             width: 50px;
 9             height: 200px;
10             background-color: orange;
11             display: none;
12         }
13     </style>
14     <script type="text/javascript">
15     function showHide(){
16         var a=document.getElementById("div1")
17         if (a.style.display=="block") {
18             a.style.display="none";
19         }
20         else{
21             a.style.display="block";
22         }
23     }
24     </script>
25 </head>
26 <body>
27     <input type="button" value="显示隐藏" onclick="showHide()">
28     <div id="div1"></div>
29 </body>
30 </html>

然后,我把它的判断条件改了一下,其实这是我第一次写的想法:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         #div1{
 8             width: 50px;
 9             height: 200px;
10             background-color: orange;
11             display: none;
12         }
13     </style>
14     <script type="text/javascript">
15     function showHide(){
16         var a=document.getElementById("div1")
17         // 这里改变了
18         if (a.style.display=="none") {
19             a.style.display="block";
20         }
21         else{
22             a.style.display="none";
23         }
24     }
25     </script>
26 </head>
27 <body>
28     <input type="button" value="显示隐藏" onclick="showHide()">
29     <div id="div1"></div>
30 </body>
31 </html>

然后它的效果是,第一次点击的时候没有反应,要点第二次,B才会出来,有点不明白

JS点击

标签:出现   二次   鼠标   消失   小问题   cti   script   color   range   

原文地址:https://www.cnblogs.com/jiushui/p/11475125.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!