Javascript：用按钮 onclick 将显示的 Div 替换为另一个隐藏的 Div

Question

我想用另一个隐藏的 div 替换已经显示的 div，只需单击一下。我不想让它切换。下面是代码。

<html>

<script type="text/javascript">
function show(elementId) { 
 document.getElementById("surf").style.display="none";
 document.getElementById(elementId).style.display="block";
}
</script>

<div id="mode" style="display: visible;">Display By Default</div>

<div id="surf" style="display: none;">Display On Click</div>
<br/>
<button type="submit" id="submit" onclick="show('surf');" name="submit">Submit</button>
</html>

当我点击按钮时，我想要的输出应该是 Display On Click。

但是现在，当我单击顶部的按钮 display by default 和按钮的 Display On Click 时，我同时显示 Display By Default 和 Display On Click。我只想在同一行上将 Display By Default 替换为 Display On Click。

Answer 1

<!DOCTYPE html>
  <html>
  <body>
    <div id="div1" style="display:block">
    <h2>first div</h2>
</div>
<div id="div2" style="display:none">
    <h2>second div</h2>
</div>
<button onclick=show()>click here</button>
</body>
<script>
function show() {
    let div1 = document.querySelector('#div1');
    let div2 = document.querySelector('#div2');

    if (div1.style.display == "block") {
        div1.style.display = "none";
        div2.style.display = "block";
    } else {
        div1.style.display = "block";
        div2.style.display = "none";
    }

  }
</script>
</html>

点击隐藏div1显示div2，接下来单击隐藏 div2 并显示 div1。

Answer 2

您在此处定位到错误的元素 document.getElementById("surf").style.display="none";。 "surf" 应该改为 "mode"。这对我有用

function show(elementId) { 
    document.getElementById("mode").style.display="none";
    document.getElementById(elementId).style.display="block";
}

<div id="mode" style="display: visible;">Display By Default</div>
<div id="surf" style="display: none;">Display On Click</div>
<br/>
<button type="submit" id="submit" onclick="show('surf');" name="submit">Submit</button>

Javascript：用按钮 onclick 将显示的 Div 替换为另一个隐藏的 Div

Javascript: Replace a Shown Div with another Hidden Div with Button onclick

html

javascript

jquery

script