使用Javascript或JQuery來顯示/隱藏點擊，並更改圖像以及

我想要在我的網頁一側點擊一個欄上的菜單顯示。使用Javascript或JQuery來顯示/隱藏點擊，並更改圖像以及

我有一個可點擊的div，隱藏或顯示的內容已經。

但是，我也希望圖像在點擊時更改，並且無法知道如何執行這兩種操作。目前我在CSS代碼中聲明背景圖像，但我知道這可能需要更改。

這是JavaScript我到目前爲止：

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
    else 
     e.style.display = 'block'; 
}

The jsfiddle is here with the html and css in.

我希望它解釋比我有更好的工作。帶着疑問開火，因爲我無法解釋我對此表示歉意。

來源

2013-01-31 GiANTOnFire

你已經完成的代碼是香草javascript，並且與jquery無關。所以你正在尋找一個jQuery或純JavaScript解決方案？ –

不要'e.style.backgroundImage ='whatever''做你想要的嗎？ – Barmar

對不起，無論是JavaScript或jQuery是好的。我試過e.style.backgroundImage =和coudn't讓它做我想要的......這可能只是我的經驗不足 – GiANTOnFire

我無法得到任何這些迴應的工作，這是我的錯，而不是我給的代碼。我可能不太瞭解它。

我改爲找到了不同的解決方案。我現在像在HTML中聲明，而不是CSS，看起來像這樣：

<script type="text/javascript"> 
function toggleVisibility(divID, imgID) 
{ 
    if (document.getElementById(divID).style.display == "block") 
    { 
     document.getElementById(divID).style.display = "none"; 
     document.getElementById(imgID).src = "images/contents2.png"; 
    } 
    else 
    { 
     document.getElementById(divID).style.display = "block"; 
     document.getElementById(imgID).src = "images/contents1.png"; 
    } 
}

<div id="float"> 
    <a href="#" onclick="toggleVisibility('contents','contentsImg')"> 
    <img id="contentsImg" src="images/contents2.png" onclick="toggleVisibility('showDiv',this.id)"/></a> 
</div> 

<div id="contents"> 
    contents 
</div>

感謝您的幫助。 :)

來源

2013-02-01 11:32:20 GiANTOnFire

你想要更多或更少類似的東西：

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block'){ 
     e.style.display = 'none'; 
     e.style.background-image = "url('path')"; 
    }else{ 
     e.style.display = 'block'; 
     e.style.background-image = "url('path')"; 
    } 
}

來源

2013-01-31 17:21:21 MarcinWolny

我認爲他在談論CSS中的背景圖像，而不是IMG元素。 – Barmar

如果你問的解決方案使用jQuery：

function toggle_visibility(content, current) { 
    var e = $(content); 
    var curr = $(current); 
    if (e.css('display') == 'block') { 
     e.css('display', 'none'); 
     curr.css('background','red'); 
    } else { 
     e.css('display', 'block'); 
     curr.css('background','#3E3E3E'); 
    } 
} 

$('#float a').click(function() { 
    toggle_visibility($('#contents'), $(this)); 
});

來源

2013-01-31 17:40:29 Jai

jQuery的方法...

<div id="float" style="background-color: Red"> 
     <a id="linkID" href="#">link</a> 
    </div> 
    <div id="contents" style="background-color: Blue"> 
     contents 
    </div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#linkID").click(function() { 
      $("#contents").toggle(); 
      if ($("#contents").is(':visible') === true) { 
       $("#float").css("background-color", "green"); 
      } else { 
       $("#float").css("background-color", "black"); 
      } 
     }); 

    });

來源

2013-01-31 18:47:07 arun

使用Javascript或JQuery來顯示/隱藏點擊，並更改圖像以及

回答

相關問題