anzeigen Ein Div und eine weitere Div ausblenden, wenn Klicken Sie auf die Schaltfläche

Was ich tun möchte, ist, wenn ich auf die Schaltfläche klicken, dann sollte man div verschwinden und andere erscheinen soll, und wenn ich auf der gleichen Taste einmal mehr klicken, dann zuerst ein sollte erscheinen und der zweite sollte verschwinden. Dies würde gehen, bis ich auf den Knopf klicke.anzeigen Ein Div und eine weitere Div ausblenden, wenn Klicken Sie auf die Schaltfläche

Was ich versucht:

JavaScript:

function change_image(){ 
    var flag = true; 
    if(flag){ 
     document.getElementById('speaker_main_div_with_rounded_image').style.display="none"; 
     document.getElementById('speaker_main_div_with_square_image').style.display="block"; 
     flag = false; 
    } else { 
     document.getElementById('speaker_main_div_with_rounded_image').style.display="block"; 
     document.getElementById('speaker_main_div_with_square_image').style.display="none"; 
     flag = true; 
    } 
}

HTML:

<input type="button" value="Click Here to get another image" onClick="change_image(this)">

Jede Hilfe dankbar sein würde.

Vielen Dank.

Quelle

2016-07-30 Bhavin Shah

Wo ist dein html? Was genau ist das Problem? – Dekel

'' –

, wenn ich zum ersten Mal auf den Button klicken dann zunächst div wird verschwinden und zweite div wird angezeigt aber wenn ich einmal auf den Knopf klicke, ist es das zweite Mal, dann zeigt es nicht das erste div und verschwindet das zweite div. –

Ihr flag Variable ist lokal, und sein Wert ist immer das gleiche, wenn die Funktion aufgerufen wird. Initialisieren Sie es mit:

var flag = document.getElementById('speaker_main_div_with_rounded_image').style.display !== 'none';

Quelle

2016-07-30 13:37:59 lbar

Fertig ... Vielen Dank .. Annahme der Antwort in 7 min. –

Dies ist meine Lösung mit jQuery-Bibliothek.

<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script> 
 
      $(document).ready(function(){ 
 
       \t $("#btn1").click(function(){ 
 
       \t \t $("#div1").toggle(); 
 
       \t \t $("#div2").toggle(); 
 
       \t }); 
 
      }); 
 
      </script> 
 
      <style> 
 
      .hide{ 
 
      display:none; 
 
      } 
 
      </style> 
 
     </head> 
 
     <body> 
 
      <button type="button" id="btn1">Toggle</button> 
 
      <div id ="div1"> 
 
      I am div 1 
 
      </div> 
 
      <div id ="div2" class="hide"> 
 
      I am div 2 
 
      </div> 
 
     </body> 
 
    </html>

Quelle

2016-07-30 13:54:07

anzeigen Ein Div und eine weitere Div ausblenden, wenn Klicken Sie auf die Schaltfläche

Antwort

Verwandte Themen