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. javascript 正则表达式使用

    切记:js 正则表达式无需用双引号,正则表达式不是字符串. 参考网址:http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp 个人用于查找字条串匹配 ...

  2. Centos ftp服务器安装配置

    yum install vsftpd [root@localhost ftp]# /sbin/service vsftpd restart 查看FTP目录 # more /etc/passwd|gre ...

  3. C语言中可变参数函数实现原理

    C函数调用的栈结构 可变参数函数的实现与函数调用的栈结构密切相关,正常情况下C的函数参数入栈规则为__stdcall, 它是从右到左的,即函数中的最右边的参数最先入栈.例如,对于函数: void fu ...

  4. Redis学习笔记九：独立功能之慢查询日志

    Redis 的慢查询日志用于记录执行时间超过给定时长的命令请求,用户可以通过这个功能产生的日志来监视和优化查询速度. 服务器配置有两个相关选项: slowlog-log-slower-than 选项指 ...

  5. CMake Error: your CXX compiler: "" was not found

    [root@amax src]# cmake . -- The CXX compiler identification is unknown CMake Error at /usr/local/sha ...

  6. HDU 4791 Alice's Print Service(2013长沙区域赛现场赛A题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4791 解题报告:打印店提供打印纸张服务,需要收取费用,输入格式是s1 p1 s2 p2 s3 p3.. ...

  7. unity3d教程游戏包含的一切文件导入资源

    http://www.58player.com/blog-2327-954.html 导入资源 将文件增加至工程文件夹的资源 (Assets) 文件夹后,Unity 将自动检测文件.将任何资源 (As ...

  8. apache2错误日志在哪，可以看到php错误

    在以下路径中 /var/log/apache2/error.log

  9. 【架构】Google的大规模集群管理工具Borg

    参考资料: http://www.cnblogs.com/YaoDD/p/5374393.html http://www.cnblogs.com/YaoDD/p/5351589.html

  10. C# 数组、多维数组（矩形数组）、锯齿数组（交叉数组）

    数组是变量的索引列表,可以在方括号中指定索引来访问数组中的各个成员,其中索引是一个整数,从0开始. 一维数组 多维数组(矩形数组) 数组的数组(锯齿数组) 数组必须在访问之前初始化,数组的初始化有两种 ...