Question

我在html文件中有两个div。

<div class="one" id="firstDiv">
</div>

<div class="Two" id="SecondDiv">
</div>

我想只显示div class =＆＃34; one＆＃34;当页面加载并最终在发生单击操作时显示div 2时。我知道如何淡化onclick事件，但是如何只在页面加载时显示第一个div？

Answer 1

要达到预期效果，请使用以下选项
选项1：
1.创建使用id来隐藏div的功能 2.使用机身上的功能作为上载功能
Codepen网址供参考 - https://codepen.io/nagasai/pen/JNNrpM

选项2：
1.使#SecondDiv显示：无最初为
2.使用display：block
使其可用 Codepen网址供参考 - https://codepen.io/nagasai/pen/KmmXez

JS：

var divTwo = document.getElementById('SecondDiv');
function hideDiv(){
  divTwo.style.display ='none';
}

function showDiv(){
  divTwo.style.display ='block';
}

HTML：

<html>
  <body onload="hideDiv()">
    <div class="one" id="firstDiv">111
</div>

<div class="Two" id="SecondDiv">222
</div>

    <button onclick="showDiv()">show Div Two</button>
  </body>
</html>

<强>选项2：

HTML:

<html>
  <body>
    <div class="one" id="firstDiv">111
</div>

<div class="Two" id="SecondDiv">222
</div>

    <button onclick="showDiv()">show Div Two</button>
  </body>
</html>

CSS：

.Two{
  display:none
}

JS：

function showDiv(){
  var divTwo = document.getElementById('SecondDiv');
  divTwo.style.display ='block';
}

Answer 2

您可以添加点击事件，以便在点击正文时，将另一个div添加到包含createElement()的页面：

https://www.w3schools.com/jsref/met_document_createelement.asp

如果你只想要添加一次div，你可以删除事件监听器以及创建div。

Answer 3

如果您希望在开始时隐藏div，可以使用CSS来应用隐藏值，例如：

<div class="hidden" id="someIdVal">Lorem Ipsum</div>

.hidden{
  display: none;
}

然后用JS删除/添加类：

function toggleHidden(id){
  document.getElementById(id).classList.toggle('hidden');
}

Answer 4

。二{显示：无;}

然后使用javascript onclick事件：

document.getElementById（“SecondDiv”）。style.display =“block”;

Javascript：如何在页面加载时只显示一个div

4 个答案: