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

暂时没有问题的写法:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1{
width: 50px;
height: 200px;
background-color: orange;
display: none;
}
</style>
<script type="text/javascript">
function showHide(){
var a=document.getElementById("div1")
if (a.style.display=="block") {
a.style.display="none";
}
else{
a.style.display="block";
}
}
</script>
</head>
<body>
<input type="button" value="显示隐藏" onclick="showHide()">
<div id="div1"></div>
</body>
</html>

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

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1{
width: 50px;
height: 200px;
background-color: orange;
display: none;
}
</style>
<script type="text/javascript">
function showHide(){
var a=document.getElementById("div1")
// 这里改变了
if (a.style.display=="none") {
a.style.display="block";
}
else{
a.style.display="none";
}
}
</script>
</head>
<body>
<input type="button" value="显示隐藏" onclick="showHide()">
<div id="div1"></div>
</body>
</html>

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

JS点击的更多相关文章

  1. js点击左右滚动+默认自动滚动类

    js点击左右滚动+默认自动滚动类 点击下载

  2. selenium—JS点击方法

    package com.allin.pc;import java.util.NoSuchElementException;import org.openqa.selenium.By;import or ...

  3. 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  4. 项目遇到的小问题(关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答)

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

  5. Js点击触发Css3的动画Animations、过渡Transitions效果

    关键是首先指定动画效果的CSS属性名称,然后在Js中改变这个属性 如果不使用Js触发,可以选择利用css的状态:hover,focus,active 来触发,也可以一开始就触发 下例为Js点击触发过渡 ...

  6. JS中点击事件冒泡阻止

    JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...

  7. JS 点击元素发ajax请求 打开一个新窗口

    JS 点击元素发ajax请求 打开一个新窗口 经常在项目中会碰到这样的需求,点击某个元素后,需要发ajax请求,请求成功以后,开发需要把链接传给前端(或者说请求成功后打开新窗口),前端需要通过新窗口打 ...

  8. html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

  9. PHP——0128练习相关2——js点击button按钮跳转到另一个新页面

    js点击button按钮跳转到另一个新页面 投稿:whsnow 字体:[增加 减小] 类型:转载 时间:2014-10-10我要评论 点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎么 ...

  10. IOS的UIWebView中JS点击事件,需要加入cursor:pointer;属性才可以

    IOS的UIWebView中JS点击事件,需要加入cursor:pointer;属性才可以. Android的WebView可以支持外链样式,js文件:IOS则需要改为内嵌样式和JS文件.

随机推荐

  1. Ubuntu 16.04 修改状态栏位置

    修改状态栏位置: gsettings set com.canonical.Unity.Launcher launcher-position Bottom #底部(苹果风格) gsettings set ...

  2. oldlinux

    http://oldlinux.org/Linux.old/ http://oldlinux.org/Book-Lite/

  3. 力扣——3sum closest(最接近的三数之和)python 实现

    题目描述: 中文: 给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和.假定每组输入只存在唯一 ...

  4. 纯js的右下角弹窗

    <html> <head> <title></title> <meta charset="UTF-8"> <scr ...

  5. tp框架连接数据库配置及Model数据模型层

    在config.php做数据库连接配置 <?php return array( //'配置项'=>'配置值' 'SHOW_PAGE_TRACE'=>true, /* 数据库设置 */ ...

  6. ceph cache pool配置

    https://my.oschina.net/hanhanztj/blog/515410 0.引入 本文介绍如何配置cache pool tiering. cache pool的作用是提供可扩展的ca ...

  7. css float 浮动

    CSS Float(浮动) 什么是 CSS Float(浮动)?大理石平台价格 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像, ...

  8. CDN技术之--集群服务与负载均衡

    Web集群是由多个同时运行同一个web应用的服务器组成,在外界看来就像一个服务器一样,这多台服务器共同来为客户提供更高性能的服务.集群更标准的定义是:一组相互独立的服务器在网络中表现为单一的系统,并以 ...

  9. AcWing 228. 异或 (dfs+线性基)打卡

    题目:https://www.acwing.com/problem/content/230/ 题意:有一个图,每条边有一个权值,现在求1-n的一条路径的最大异或和,一条边能经过多次,相应的也要计算那么 ...

  10. jmeter之--断言json响应&json path espressions的语法

    一.提取所需要断言的内容: 响应数据如下:加入需要提取id为90的值 { , "name" : "python", "url" : &quo ...