HTML:

<button type="button"  id="showHidden">点击切换div的隐藏与显示</button>

<div id="div1">请叫我第一层</div>

<div id="div2">请叫我第二层</div>

JS:

<script type='text/javascript'>

function show_hidden(obj) {

  if(obj.style.diaplay == 'block') {

     obj.style.display = 'none';

  } else {

     obj.style.display = 'block';

  }

}

var sh = document.getElementById("showHidden");

sh.click = function() {

var div1 =  document.getElementById("div1");

var div2 =  document.getElementById("div2");

show_hidden(div1);

show_hidden(div2);

return false;

}

</script>

示例:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

</head>
<body>

<button type="button" id="showHidden">点击切换div的隐藏与显示</button>

<div id="div1" style="display:block">请叫我第一层</div>

<div id="div2" style="display:none">请叫我第二层</div>

<script type='text/javascript'>

function show_hidden(obj) {

  if(obj.style.display == 'block') {

   obj.style.display = 'none';

  } else {

     obj.style.display = 'block';

  }

}

var sh = document.getElementById("showHidden");

sh.onclick = function() {

var div1 = document.getElementById("div1");

var div2 = document.getElementById("div2");

show_hidden(div1);

show_hidden(div2);

return false;

}

</script>

</body>

</html>

点击按钮对两个div的隐藏与显示进行切换的更多相关文章

  1. Jquery一个slideToggle搞定div的隐藏与显示

    Jquery一个slideToggle搞定div的隐藏与显示 <!DOCTYPE html> <html> <head> <script src=" ...

  2. 承载地图的div如果隐藏再显示,则定位时会定位到页面左上角

    承载地图的div如果隐藏再显示,则定位时会定位到页面左上角. 解决方法:不隐藏,改变div的高度.在div上利用z-index加一个新的不透明的div.

  3. 点击按钮弹出一个div层

    JQuery弹出层,点击按钮后弹出遮罩层,还有关闭按钮 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...

  4. 如何让两个div在同一行显示?一个float搞定

    最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,<div> 是一个 ...

  5. 两个div不同高度并排显示

    在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3)设置position定位属性为abs ...

  6. 简单地做一下“回到顶部”按钮,用jQuery实现其隐藏和显示

    1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> ...

  7. 前台技术--div的隐藏与显示

    怎样使用页面元素隐藏或显示. HTML为我们提供了两个变量visibility和display visibility:隐藏要元素可是元素所暂用的空间不予释放.也就是说元素隐藏了,可是页面上会流出一片空 ...

  8. jQuery第三课 点击按钮 弹出层div效果

    jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...

  9. jQuery点击按钮实现div的隐藏和显示切换效果

    <script type="text/javascript"> $(function(){ $('#click_event').click(function(){  i ...

随机推荐

  1. java web 相对路径中已/开头和不已/开头的区别

    通俗的讲,有/会从跟目录开始算,没有会从当前目录开始算 1.前台页面 ​页面中向服务器页面请求静态资源且没有指定<base href="<%=basePath%>" ...

  2. 关于ListView中notifyDataSetChanged()刷新数据不更新原因

    使用Listview的时候: 当要动态显示更改后的数据(例如数据库改动), 很多人应该都用过notifyDataSetChanged();这个方法来刷新Listview,显示改后的数据. 这时候就要注 ...

  3. Entity Framework Code First数据库自动更新2

    以前做项目的时候,没有采用分类库的形式,所以迁移一致非常顺利,没有出现过任何状况. 这次做项目稍微有点大,必须要分类库才方便开发维护. 在解决方案中启用项目EntityFramework迁移时却发生了 ...

  4. [POJ2892]Tunnel Warfare

    [POJ2892]Tunnel Warfare 试题描述 During the War of Resistance Against Japan, tunnel warfare was carried ...

  5. Android中的“再按一次返回键退出程序”实现

    用户退出应用前给出一个提示是很有必要的,因为可能是用户并不真的想退出,而只是一不小心按下了返回键,大部分应用的做法是在应用退出去前给出一个Dialog,我觉得这样不太友好,用户还得移动手指去按dial ...

  6. Android四种基本布局(LinearLayout \ RelativeLayout \ FrameLayout \ TableLayout)

    ------------------------------------------LinearLayout---------------------------------------------- ...

  7. 二分图------》Hopcroft-Karp算法 hdu2389

    Hopcroft-Karp算法 该算法由John.E.Hopcroft和Richard M.Karp于1973提出,故称Hopcroft-Karp算法. 原理 为了降低时间复杂度,可以在增广匹配集合M ...

  8. yum服务器搭建(深入理解yum工作原理)

    作者:firefoxbug 时间:July 27, 2014 分类:Linux 前言 在前面一篇rpm包制作描述了rpm的打包过程,这篇文章主要讲述yum的工作原理. yum 运行原理 yum的工作需 ...

  9. C# 毕业证书打印《四》

    数据存储,读取控件在Panel中的位置,将控件的位置保存到xml文件中. /// <summary> /// 将当前格式写入xml /// </summary> /// < ...

  10. 基于MATLAB的离散小波变换

    申明,本文非笔者原创,原文转载自:  基于Matlab的离散小波变换         http://blog.sina.com.cn/s/blog_725866260100ryh3.html 简介 在 ...