如何隐藏一个div并使用button onclick显示另一个div？ [英] How to hide one div and show another div using button onclick?

问题描述

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

I have two div in my html file. I want to hide the 1st div and show another div on html input button onclick event.

，

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

推荐答案

在onclick，你不必使用javascript：，这是隐含的。

1) Inside onclick, you don't have to use "javascript:", that is implied.

2）检查显示：块，我总是检查显示：none（因为显示也可以是inline-block等）

2) You check for "display: block", I always check for "display: none" (Because the display can also be "inline-block", etc.)

请尝试这样：

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

这篇关于如何隐藏一个div并使用button onclick显示另一个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！