点击按钮对两个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>
最新文章
- TimerToPdf
- php解决中文截取乱码问题
- Html--表单练习
- DHTMLX-Windows
- CSS Reset样式重置
- Repeater 双向排序
- c/c++ 数据结构 链表插入数据代码（一）
- Codeforce Round #227 Div2
- Oracle执行计划——使用index full scan的几种情况
- JSP总结1
- Java变量参数
- poj_1845: Sumdiv
- css3动画2D、3D转换
- JS嵌套循环的典型练习题
- 解决xshell评估期已过的问题
- Swift构造
- xshell远程终端操作Ubuntu server安装LAMP环境之最详细笔记之二PHP开发环境配置
- NetBeans无法使用svn相关功能
- pandas将DataFrame的列变成行索引
- 禁用表单元素 && 禁止选中