首页 > 其他 > 详细

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

时间:2016-04-21 11:31:58      阅读:649      评论:0      收藏:0      [点我收藏+]

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>

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

原文:http://www.cnblogs.com/Man-Dream-Necessary/p/5416164.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!