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

HTML：

<button type="button" id="showHidden">点击切换div的隐藏与显示</button>

<div id="div1">请叫我第一层</div>

<div id="div2">请叫我第二层</div>

JS:

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>
<body>

<button type="button" id="showHidden">点击切换div的隐藏与显示</button>

<div id="div1" style="display:block">请叫我第一层</div>

<div id="div2" style="display:none">请叫我第二层</div>

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>

转载于:https://www.cnblogs.com/Man-Dream-Necessary/p/5416164.html

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

Bootstrap—点击按钮控制div隐藏和显示的切换（图文详情）
Bootstrap-点击按钮控制div隐藏和显示的切换第一步:bootstrap有一个open类用来控制隐藏和显示,动态获取open是true还是false,并且点击按钮让toggle的true和f ...
点击切换div 的隐藏与显示
点击切换div 的隐藏与显示适合做切换按钮 <!DOCTYPE html> <html><head><meta charset="utf-8&qu ...
点击事件div的隐藏和显示
按照图片步骤来做 1.先设置文字隐藏和显示. 2.在设置div和类. 3.设置完样式之后设置css的div. 4.上面的的设置隐藏和显示的div的宽和高and颜色. 5.设置js样式,第一设置隐藏和显 ...
jquery实现div的隐藏和显示
jquery实现div的隐藏和显示 $('#wsView')是要点击的按钮,$('#secondMenu')是要显示或隐藏的内容区域 <div style="float:left;ma ...
html隐藏块元素过度动画,CSS3实现DIV图层隐藏到显示的过渡效果
本文介绍CSS3实现DIV图层隐藏到显示的过渡效果,可用于产品列表的产品简介过渡显示与隐藏等,希望对你有所帮助. CSS3的transition过渡属性对于页面元素的显隐并没有提供过渡方法!所以DIV ...
鼠标点击按钮相应两次
用UGUI鼠标点击按钮,响应的方法是一个观察者模式,监听方法是一个脚本,结果我在两个物体上面添加了这个脚本然后出问题了,就响应了两次,我开协程当点击的时候等待0.5秒再响应结果还是有问题,最后在场 ...
点击按钮弹出一个DIV层
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
jquery实现div的隐藏和显示和点击空白显示隐藏
$('#button')是要点击的按钮,$('#view')是要显示或隐藏的内容区域一.点击按钮显示隐藏 $(function () { $("#button").click(f ...
如何让两个div在同一行显示?一个float搞定
最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,<div> 是一个 ...
vue设置div块隐藏与显示（v-show）
任务要求:鼠标移入导航圆圈后显示导航栏 <el-button circle style="position: fixed;left:0px;top:300px;width: 50px; ...

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

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

最新文章

热门文章