点击按钮对两个div的隐藏与显示进行切换
Posted xywl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击按钮对两个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的隐藏与显示进行切换的主要内容，如果未能解决你的问题，请参考以下文章
两个按钮，点击向上的按钮当前的div移动到上一个div的上面，当点击向下的按钮，当前div移动下面的div下面
两个单选按钮(一个是，一个否 ),一个div层,实现点击隐藏,显示div