1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 点击按钮对两个div的隐藏与显示进行切换

点击按钮对两个div的隐藏与显示进行切换

时间:2020-05-21 12:38:42

相关推荐

点击按钮对两个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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。