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. VVDocumenter升级后不能使用问题

    VVDocumenter-Xcode是Xcode上一款快速添加标准注释,并可以自动生成文档的插件.有了VVDocumenter-Xcode,规范化的注释,只需要输入三个斜线“///”就可以搞定,非常方 ...

  2. 计蒜客 删除字母'c'

    删除字母'c' 右侧的程序实现的功能是从字符串s中删除所有的小写字母c,请改正程序错误的地方. 注意:main函数不可以改动,程序结构也不能修改. 很简单的哦,加油吧- 样例输入 abccabcn 样 ...

  3. Caffe学习系列(15)：添加新层

    如何在Caffe中增加一层新的Layer呢?主要分为四步: (1)在./src/caffe/proto/caffe.proto 中增加对应layer的paramter message: (2)在./i ...

  4. Android 解析JSON格式数据

    比起XML,JSON主要优势在于它的体积更小,在网络上传输的时候可以更省流量.但缺点在于,它的语义性较差,显示不如XML直观. JSON格式 :  { "name_A" : &qu ...

  5. Android客户端的图形化拖放操作的设计实现

    为什么要拖放?拖放在某些UI交互中可以简化用户操作. 拖放的步骤包括哪些?“Drag and Drop”,拖放,顾名思义,总共就分三步:1, 开始拖起来:2, 正在拖:3, 放下,进行操作:在这三步里 ...

  6. rpm包制作(待实验)

    作者:firefoxbug 时间:July 18, 2014 rpm包命名规范 对于rpm包的命名符合如下规范. %{NAME}-%{VERSION}-%{RELEASE}.%{ARCH}.rpm N ...

  7. vmware-question

    1.网卡修改序号ip link set eth3 name eth02.解决克隆虚拟机后网卡设备无法识别启动问题的方法******************************/etc/udev/r ...

  8. 【GoLang】GoLang 官方 对 error 处理的意见

    The Go Blog Errors are values 12 January 2015 A common point of discussion among Go programmers, esp ...

  9. STL---总结

    文章转自:http://www.cnblogs.com/biyeymyhjob/archive/2012/07/22/2603525.html 一.STL的六大组件 容器(Container),是一种 ...

  10. PyCharm 4.0.6 注册码

    Professional Edition版本比Free版本多了很多东西,比如 Web development,Django等等,重新下了Professional版本,虽然是只30天免费,但是到时候重装 ...