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

小编典典

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

css

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

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

谢谢。

阅读 1124

2020-05-16

共1个答案

小编典典

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

2020-05-16