2016-07-30 7 views
0

Что я хочу сделать, когда я нажимаю кнопку, тогда один div должен исчезнуть, а другой должен появиться, и если я нажму на эту же кнопку еще раз, тогда сначала должен появиться, а второй должен исчезнуть. Это будет продолжаться, пока я не нажму кнопку.Покажите один Div и скройте другое Div, когда нажмете на кнопку

Что я пробовал:

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

Любая помощь будет признателен.

Thank you.

+0

Где ваш HTML? в чем именно проблема? – Dekel

+0

'' –

+0

, когда я нажимаю на кнопку в первый раз, после чего первый div исчезает и появляется второй div но когда я нажимаю кнопку еще раз, это второй раз, тогда он не показывает первый div и исчезает второй div. –

ответ

2

Ваша flag переменная является локальной, и ее значение всегда одинаково при вызове функции. Инициализация:

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

Выполнено ... Спасибо .. принятие ответа в 7 мин. –

1

Это мое решение с использованием библиотеки jQuery.

<!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>

Смежные вопросы