点击按钮对两个div的隐藏与显示进行切换
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的隐藏与显示进行切换的更多相关文章
- Jquery一个slideToggle搞定div的隐藏与显示
Jquery一个slideToggle搞定div的隐藏与显示 <!DOCTYPE html> <html> <head> <script src=" ...
- 承载地图的div如果隐藏再显示，则定位时会定位到页面左上角
承载地图的div如果隐藏再显示,则定位时会定位到页面左上角. 解决方法:不隐藏,改变div的高度.在div上利用z-index加一个新的不透明的div.
- 点击按钮弹出一个div层
JQuery弹出层,点击按钮后弹出遮罩层,还有关闭按钮 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...
- 如何让两个div在同一行显示?一个float搞定
最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,<div> 是一个 ...
- 两个div不同高度并排显示
在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3)设置position定位属性为abs ...
- 简单地做一下“回到顶部”按钮，用jQuery实现其隐藏和显示
1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> ...
- 前台技术--div的隐藏与显示
怎样使用页面元素隐藏或显示. HTML为我们提供了两个变量visibility和display visibility:隐藏要元素可是元素所暂用的空间不予释放.也就是说元素隐藏了,可是页面上会流出一片空 ...
- jQuery第三课 点击按钮 弹出层div效果
jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...
- jQuery点击按钮实现div的隐藏和显示切换效果
<script type="text/javascript"> $(function(){ $('#click_event').click(function(){ i ...
随机推荐
- 动态修改attr里的多个属性
要点: 1.js将字符串转化为object方法,通过新建函数. 2.通过ajax返回的数据是object类型. 3.jquery.attr()里的attr是object类型 例子:主要实现后台返回的a ...
- mysql python image
连接mysql数据库: cnx = mysql.connector.connect(user='joe', database='test') Connector/Python参数列表 Argument ...
- JQuery simpleModal插件的使用-遁地龙卷风
(0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simpl ...
- CSU 1337 搞笑版费马大定理（2013湖南省程序设计竞赛J题）
题目链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1337 解题报告:虽然x和y的范围都是10^8,但是如果a 是大于1000的话,那么a^3 ...
- CSU 1328 近似回文词（2013湖南省程序设计竞赛A题）
题目链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1328 解题报告:中文题题意就不说了.还好数据不大,只有1000,枚举回文串的中心位置,然 ...
- Ubuntu 中安装 NetBeans IDE
NetBeans 8.2 刚刚发布,如果你还没有安装的话,这篇简短的教程将会演示如何在 Ubuntu 系统上快速的安装.对安装 NetBeans 需要帮助的开发者来说,这往篇文章会是不错的指导. 给那 ...
- 转：bwa的使用方法
bwa的使用需要两中输入文件: Reference genome data(fasta格式 .fa, .fasta, .fna) Short reads data (fastaq格式 .f ...
- backbone调试
有一个谷歌的扩展程序:https://chrome.google.com/webstore/detail/backbone-debugger/bhljhndlimiafopmmhjlgfpnnchjj ...
- 傅里叶变换库FFTW的安装配置(VS2010)
FFTW是用来计算一维或者多维的离散傅里叶变换,输入可以为实数序列也可以为复数序列的C语言的子函数库,FFTW是免费软件,是作为fft函数库的各种应用的上佳选择. 1. 从网站http://www.f ...
- phpcms--模型管理，推荐位管理，类别管理
phpcms的默认设置不一定能满足需求,这个时候必须启用[模型管理],[推荐位管理],[类别管理]三个高级功能 为什么需要使用这些功能呢,因为后台添加内容的时候需要不同的模型 而模型通过什么来展现呢, ...