點擊按鈕對兩個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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM