显示和隐藏一个div的问题

显示和隐藏div的问题

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#myDiv {            width: 100px;            height: 100px;            background: red;            display: none;}    </style></head><body><input type="button" value="出现"><div id="myDiv"></div><script type="text/javascript">var oBtn = document.getElementsByTagName('input')[0];        var oDiv = document.getElementById('myDiv');oBtn.onclick = function() {oDiv.style.display = (oDiv.style.display === "none") ? "block" : "none";} </script></body></html>

这里有个问题：上面代码，首次显示div，必须单击两次按钮，后面再显示隐藏就只需单击一次就可以了。

解决方法1

三元操作符的判断条件换成反面

代码：

oDiv.style.display = (oDiv.style.display === "block") ? "none" : "block";

解决方法2

display:none;

放在行内，但是最好不要这样（结构方式分离起见）；

文章来源：https://www.shengli.me/javascript/5.html

显示和隐藏一个div的问题相关推荐

html 特效隐藏div,如何实现用css3显示隐藏一个div特效
这篇文章主要介绍了关于如何实现用css3显示隐藏一个div特效,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下显示隐藏一个p特效的方法有很多,下为大家介绍下使用纯css3是如何实现的, ...
php隐藏指定id的div,CSS_纯css3显示隐藏一个div特效的具体实现，复制代码代码如下: !DOCTYPE H - phpStudy...
纯css3显示隐藏一个div特效的具体实现复制代码代码如下: #showDiv { background-color:red; width:300px; height:300px; display: ...
css设置一个div显示在另一个div的上层_CSS工程中常见问题-1
1. 图片下方会产生几像素的空白代码: // html <div class="zls"><img src="../imgs/zls.jpg" ...
鼠标移入显示移出隐藏及反复闪烁问题
html代码 <div id="prev"></div><div id= ...
html隐藏整个div,javascript – 如何显示一个div并隐藏所有其他div
我想在每个按钮点击时显示一个div,并且想要隐藏其他所有div我是如何做到的. 1 2 3 4 JQUERY $('#w').live('click', function(){ $('#a').cs ...
html中怎么让一个div显示或隐藏,怎么让一个div显示一个div隐藏?
让一个div显示一个div隐藏的方法如下(代码的规格写法只能这样): 1.HTML代码如下: menu0 menu1 menu2 menu3 menu4 menu5 menu6 menu7 d0 d1 ...
html动态显示隐藏div,div隐藏与显示属性怎么让一个div显示一个div隐藏
怎么让一个div显示一个div隐藏总是显示 js控制div显示与隐藏,js利用"hover"属性 1.首先样式要设定好,在每个li区域只能显示a或者b. 2.引入js库代码(jq ...
jquery之超简单的div显示和隐藏特效demo
闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C ...
基于JQuery做的一个简单的点击显示和隐藏的小Demo
最近新加入了一个公司,并接手到了一个新项目,是基于 Spring + Spring MVC + MyBatis 架构来搭建的,在公司领导的需求下修改功能,需要修改些修改些前端页面,原本很简单的就是一个 ...

显示和隐藏一个div的问题

显示和隐藏一个div的问题相关推荐

最新文章

热门文章