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

示例:

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

时间: 2024-11-11 05:01:29

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

点击按钮实现隐藏和显示的切换代码

点击按钮实现隐藏和显示的切换代码:在不少应用中,都有这样的功能,点击同一个按钮可以实现一个元素的显示和隐藏的切换,下面就通过代码实例介绍一下如何实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> &

点击按钮弹出一个div层

JQuery弹出层,点击按钮后弹出遮罩层,还有关闭按钮 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <meta content="网页特效,特效代码,jQuery,css特效,Js代码" name="keywords" /> <

两个div在一行中显示

div元素默认是换行的,如果想让两个div显示在一行中,需要分别设置div的display属性值为:inline-block.这样两个div紧挨着显示在一行了.如:<div style='dispaly:inline-block'> value1<div><div style='dispaly:inline-block'> value2<div>还有一个css特性float,这个是设置元素浮动的,一般用在图片上.也可以让div浮动,但是会出现一些很奇怪的现象

如何让两个div在同一行显示?一个float搞定

最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符.可以加一个属性float:left,演示代码如下 <div> <div style="float:left; width:100px; border:2px solid #aa00FF; ">第一个

简单地做一下“回到顶部”按钮,用jQuery实现其隐藏和显示

1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> </div> 这里的<a>标签里面的href=“#top”就表示点击它就可以回到顶部,就不写回到顶部的代码了 2.设置其CSS样式: #return-top{ width: 50px; height: 50px; background-color: #8FBC8F;/*背景颜色*/

利用Js/Jquery实现div的隐藏与显示(注意释放与不释放空间)

JS隐藏和显示div的方式有两种:方式1:隐藏后释放占用的页面空间通过设置display属性可以使div隐藏后释放占用的页面空间. style="display: none;" document.getElementById("demo").style.display="none";//隐藏 document.getElementById("demo").style.display="";//显示 方式2:

jquery和js对div的隐藏和显示

jQuery对div的显示和隐藏: 显示: $("#id").show() 隐藏: $("#id").hide() js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 style="visibility: none;" document.getElementById("typediv1").style.visibility="hidden";//隐藏

前台技术--div的隐藏与显示

怎样使用页面元素隐藏或显示. HTML为我们提供了两个变量visibility和display visibility:隐藏要元素可是元素所暂用的空间不予释放.也就是说元素隐藏了,可是页面上会流出一片空白的地方. 使用方法: style="visibility: hidden;" document.getElementById("typediv1").style.visibility="hidden";//隐藏 document.getElemen

问题8:手机端实现点击按钮时更换颜色(解决IOS不显示背景)

CSS: .sval:active, .sval:focus{ background: #999;color:#fff;opacity:50; } 在触屏上,:hover和:active也不是直接就起到作用的,这里要借助一个小小的hack,在html的body中(或者目标元素上)添加 ontouchstart="" ,来邪恶地诱使WebView监听touch事件. HTML: <body ontouchstart=""> 或:javaScript: &l