web-dev-qa-db-ger.com

Wie kann ich eine Div verstecken und eine andere Div anzeigen, indem ich auf die Schaltfläche klicke?

Ich habe zwei Div in meiner HTML-Datei. Ich möchte das 1. Div verstecken und ein weiteres Div auf der HTML-Eingabeschaltfläche onclick anzeigen.

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

Aber es funktioniert nicht. Jede Hilfe wird geschätzt.

Vielen Dank.

javascriptjqueryhtmlcss
5
Arpita

1) Innerhalb von onclick müssen Sie nicht "javascript:" verwenden, das ist impliziert.

2) Sie prüfen nach "Anzeige: Block", ich überprüfe immer nach "Anzeige: Keine" (Da die Anzeige auch "Inline-Block" sein kann usw.)

Versuche dies:

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

9
Philip

Da es mit jQuery markiert ist, folgt hier die einfache Antwort von jQuery

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

verwenden Sie on, um auf die ID #Button zu lauschen. Ich habe sowohl click als auch touchstart verwendet, um sie mobil zu machen, und dann toggle (), wodurch der Status der Anzeige festgelegt wird. Wenn es also angezeigt wurde: keine, wird es zu Anzeige: Block, wenn es angezeigt wurde: Block wird es Anzeige: Keine

3
Andrew Killen

Versuche dies:

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" />

Dieser Ansatz kann jedoch besser sein:

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" />

1
Oriol

sie möchten vielleicht dies versuchen ..

    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>

1
Wracker

Fügen Sie das Click-Ereignis nicht über HTML hinzu. Fügen Sie einen Ereignis-Listener wie document.getElementById ("Button1").addEventListener ("click", switchVisible, false); hinzu.

Siehe jsFiddle hier: http://jsfiddle.net/bevanr01/gmkconLw/

0
Russell Bevan

Wahrscheinlich haben Sie Syntaxfehler in Ihrem Code. Dieser arbeitet:

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

0
Alex Char