如何使用按钮onclick隐藏一个div并显示另一个div？

Z时代
2024-01-10
分类：问答

我的html文件中有两个div。我想隐藏第一个div并在html输入按钮onclick事件上显示另一个div 。

这是我的代码，

function switchVisible() {
  if (document.getElementById('Div1') !== undefined) {
    if (document.getElementById('Div1').style.display == 'Block') {
      document.getElementById('Div1').style.display = 'none';
      document.getElementById('Div2').style.display = 'Block';
    } else {
      document.getElementById('Div1').style.display = 'Block';
      document.getElementById('Div2').style.display = 'none';
    }
  }
}
#Div2 {
  display: none;
}
<input id="Button1" type="button" value="" onclick="javascript:switchVisible();" />

但这不起作用。任何帮助将不胜感激。

谢谢。

回答：

1）在onclick内，您不必使用暗示的“ javascript：”。

2）您检查“显示：阻止”，我总是检查“显示：无”（因为显示也可以是“行内阻止”，等等。）

尝试这个：

function switchVisible() {
            if (document.getElementById('Div1')) {
                if (document.getElementById('Div1').style.display == 'none') {
                    document.getElementById('Div1').style.display = 'block';
                    document.getElementById('Div2').style.display = 'none';
                }
                else {
                    document.getElementById('Div1').style.display = 'none';
                    document.getElementById('Div2').style.display = 'block';
                }
            }
}
#Div2 {
  display: none;
}
<div id="Div1">Div 1</div>
<div id="Div2">Div 2</div>
<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>