Question

我有一个显示/隐藏div的基本脚本。我正在使用它作为下拉菜单。

https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

我正在寻找页面加载时隐藏的div元素，而不是显示并不得不单击以切换它。

感谢您的帮助！

Answer 1

像下面一样在div中使用display: none

<div id="myDIV" style="display:none">
  This is my DIV element.
</div>

或者您可以创建一个类并分配给div。

<style>
.hide{
   display:none;
}
</style>


<div id="myDIV" class="hide">
  This is my DIV element.
</div>

Answer 2

除了CSS，您还可以使用JavaScript通过利用onload等事件来操纵网页的显示。

window.onload = function(){
  document.getElementById("myDIV").style.display='none';
};

<div>
  This is the first DIV element.
</div>

<div id="myDIV">
  This is the 2nd DIV element.
</div>

<div>
  This is the last DIV element.
</div>

Answer 3

使用以下方法，您告诉浏览器忽略页面上的这些元素。

在HTML或CSS文件的8号元素上不显示任何内容。

<div style="display: none">
  This is my DIV element.
</div>

隐藏属性也很有帮助。

<div hidden>
  This is my DIV element.
</div>

如何在网页加载时隐藏div

3 个答案: