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

How to hide one div and show another div using button onclick?

提问by Arpita

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

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

Here is my code,

这是我的代码，

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

But it's not working. Any help will be appreciated.

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

Thanks.

谢谢。

回答by Philip

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

1) 在onclick 中，您不必使用“javascript:”，这是隐含的。

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

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

Try this:

尝试这个：

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

回答by Andrew Killen

As it is tagged with jQuery, here's the simple jQuery answer

由于它被标记为 jQuery，这是简单的 jQuery 答案

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

use on to listen for the id #Button, I've used both click and touchstart to make it mobile friendly, and then used toggle() which sets the state of the display: to the opposite to what it is now. So if it was display:none, it becomes display:block, if it was display:block it becomes display:none

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

回答by Wracker

you might wanna try this..

你可能想试试这个..

    function switchVisible() {
     var div1=document.getElementById('Div1');
     var div2=document.getElementById('Div2');
     
      if (div1 !== undefined && div2 !== undefined) {
       div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block';
       div2.style.display = div1.style.display === 'block' ? 'none' : 'block';
      }
    }

#Div1{
 display: block;
 background: blue;
}

#Div2 {
  display: none;
  background: red;
}

.divs
{
 width: 50px;
 height: 50px;
 border: 1px solid #000;
}

<input id="Button1" type="button" value="Hide" onclick="switchVisible();" />

<div id="Div1" class="divs"> </div>
<div id="Div2" class="divs"> </div>

回答by Oriol

Try this:

尝试这个：

var div1 = document.getElementById('Div1'),
    div2 = document.getElementById('Div2');
function switchVisible() {
  if(!div1) return;
  if (getComputedStyle(div1).display == 'block') {
    div1.style.display = 'none';
    div2.style.display = 'block';
  } else {
    div1.style.display = 'block';
    div2.style.display = 'none';
  }
}
document.getElementById('Button1').addEventListener('click', switchVisible);

#Div2 {
  display:none;
}

<div id="Div1">Div 1</div>
<div id="Div2">Div 2</div>
<input id="Button1" type="button" value="Click me" />

---

---

However, this approach may be better:

但是，这种方法可能更好：

var wrapper = document.getElementById('wrapper');
function switchVisible() {
  wrapper.classList.toggle('switched');
}
document.getElementById('Button1').addEventListener('click', switchVisible);

#wrapper > :last-child {
  display: none;
}
#wrapper.switched > :last-child {
  display: block;
}
#wrapper.switched > :first-child {
  display: none;
}

<div id="wrapper">
  <div>Div 1</div>
  <div>Div 2</div>
</div>
<input id="Button1" type="button" value="Click me" />

回答by Alex Char

Probably you have some syntax errors in your code. This one is working:

可能您的代码中有一些语法错误。这个正在工作：

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';
        }
    }
}

#Div1 {
    display:none;
}
#Div1 {
    background: red;
}
#Div2 {
    background: green;
}
#Div1, #Div2 {
    width: 50px;
    height:50px;
}

<div id="Div1"></div>
<div id="Div2"></div>
<input id="Button1" type="button" value="" onclick="javascript:switchVisible();" />

回答by Russell Bevan

Don't add the click event through html. Add an event listener like document.getElementById ("Button1").addEventListener ("click", switchVisible, false);

不要通过html添加click事件。添加一个事件侦听器，如document.getElementById ("Button1").addEventListener ("click", switchVisible, false);

See working jsFiddle here: http://jsfiddle.net/bevanr01/gmkconLw/

在此处查看工作 jsFiddle：http: //jsfiddle.net/bevanr01/gmkconLw/