單擊按鈕顯示一個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