JavaScript點選一個按鈕隱藏和顯示div

admin發表於2017-11-26
JavaScript

本章節通過程式碼例項介紹一下如何實現點選同一按鈕實現一個元素的顯示和隱藏效果。

此效果還是比較實用的，比如點選按鈕可以實現一個功能模組的顯示或者隱藏。

下面就通過程式碼例項介紹一下如何實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#thediv{
  width:200px;
  height:50px;
  background:#ccc;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var obt=document.getElementById("bt");
  var odiv=document.getElementById("thediv");
  obt.onclick=function(){
    if(odiv.style.display=="none"){
      odiv.style.display="block";
      obt.value="隱藏模組";
    }
    else{
      odiv.style.display="none";
      obt.value="顯示模組";
    }
  }
}
</script>
<body>
<input type="button" id="bt" value="顯示模組"/>
<div id="thediv" style="display:none"></div>
</body>
</html>

上面的程式碼實現了我們的要求，點選按鈕可以實現切換效果。

相關文章