单击按钮显示一个Div并隐藏另一个Div

Question

我想做的是，当我单击按钮时，一个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)">

任何帮助将不胜感激。

谢谢。

Answer 1

您的flag变量是局部变量，调用函数时其值始终相同。 初始化它：

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

Answer 2

这是我使用jQuery Library的解决方案。

  <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#div1").toggle(); $("#div2").toggle(); }); }); </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>

单击按钮显示一个Div并隐藏另一个Div

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-07-30 13:37:59

解决方案2
1 2016-07-30 13:54:07

单击按钮显示一个Div并隐藏另一个Div

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-07-30 13:37:59

解决方案2 1 2016-07-30 13:54:07

解决方案1
2 已采纳 2016-07-30 13:37:59

解决方案2
1 2016-07-30 13:54:07