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. APPCAN MAS接口之SOAP

    APPCAN MAS接口中使用webservice接口形式,示例代码如下:  1 var MEAP=require("meap");  2   3 function run(Par ...

  2. flexbox-CSS3弹性盒模型flexbox完整版教程

    原文链接:http://caibaojian.com/flexbox-guide.html flexbox-CSS3弹性盒模型flexbox完整版教程 A-A+ 前端博客•2014-05-08•前端开 ...

  3. oracle 行列转换的运用

    问题: 员工表: A(E_ID,NAME,) 部门表:  B(D_ID,D_NAME) 员工与部门关系:C(ID,E_ID,D_ID) SELECT  A.E_ID,A.NAME ,B.D_NAME ...

  4. HDU 5122 K.Bro Sorting（2014北京区域赛现场赛K题 模拟）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5122 解题报告:定义一种排序算法,每一轮可以随机找一个数,把这个数与后面的比这个数小的交换,一直往后判 ...

  5. AMD正式公布第七代桌面级APU AM4新接口

    导读 本月5日,AMD正式公布了入门级的第七代桌面级APU为Bristol Ridge,在性能和能效方面较上一代产品拥有显著提升.AMD同时确认Zen处理器和新APU(Bristol Ridge)都将 ...

  6. Unity手游之路<一>C#版本Protobuf

    http://blog.csdn.net/janeky/article/details/17104877 个游戏包含了各种数据,包括本地数据和与服务端通信的数据.今天我们来谈谈如何存储数据,以及客户端 ...

  7. [hihoCoder#1381]Little Y's Tree

    [hihoCoder#1381]Little Y's Tree 试题描述 小Y有一棵n个节点的树,每条边都有正的边权. 小J有q个询问,每次小J会删掉这个树中的k条边,这棵树被分成k+1个连通块.小J ...

  8. aspcms 留言 搜索

    留言: <form method='POST' name='myform' onSubmit='return metmessagesubmit("姓名不能为空"," ...

  9. [转载]JavaEE学习篇之——JDBC详解

    原文链接:http://blog.csdn.net/jiangwei0910410003/article/details/26164629 目录1.摘要2.JDBC的使用步骤 1.注册驱动 只做一次 ...

  10. static小结

    1.隐藏:编译多个文件时,所有未加static的全局变量.全局函数都具有全局可见性. 如果加了static,就会对其他源文件隐藏,利用这一特性可以在不同文件中定义相同的 变量名或函数名,而不用担心冲突 ...