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

Question

我的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();" />

但它不起作用.任何帮助将不胜感激.

谢谢.

Answer 1

1)在onclick中,你不必使用"javascript:",这是隐含的.

2)检查"display:block",我总是检查"display:none"(因为显示也可以是"inline-block"等)

试试这个:

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();"/>

Answer 2

因为它是用 jQuery 标记的，所以这是简单的 jQuery 答案

$('body').on("click touchstart", "#Button1", function(e){
   $("#Div1, #Div2").toggle();
});

使用 on 来监听 id #Button，我使用了 click 和 touchstart 来使其适合移动设备，然后使用 toggle() 来设置显示状态：与现在相反。所以如果是display:none，它就变成display:block，如果是display:block，它就变成display:none