更改按鈕背景顏色點擊本身

比方說，我有#button與給定的background-image：url（images/some_background），我想改變它到另一個背景，當我點擊它，讓我們說url（圖像/ other_background）。更改按鈕背景顏色點擊本身

 HTML 

     <a id="button" ></a> 

     CSS 

    display: block; 
    height:100px; 
    width:100px; 
    background-image:url(images/other_background.png)

我嘗試這樣做，但它不工作：

$(document).ready(function(){ 

    $('#button').click(function(){ 

      $('#button').css('backgroundImage', 'url(images/other_background.png)'); 

     }); 

});

來源

2011-07-12 user461316

這對我的作品

CSS

#button{display: block; height:100px; width:100px; 
background-image:url(http://cheeptalk.files.wordpress.com/ 
2009/05/smurfs-hefty-smurf-100x100.png?w=96&h=96); border:1px solid red;}

邊框更容易看到僅

代碼

$('#button').click(function(){ 
    $(this).css('backgroundImage','url(http://images.mirror.co.uk/upl/m4/\ 
    feb2010/9/3/mr-t-100x100-938742195.jpg)'); 
});

http://jsfiddle.net/jasongennaro/Lvnmw/

很明顯，您需要將圖像切換爲自己的圖像。

如果您有問題，請檢查

那你第一次調用jQuery腳本，該腳本之前。
圖片的路徑是正確的。

來源

2011-07-12 03:13:36

我認爲他遇到的具體問題與他有關，並不妨礙他的超鏈接默認事件。在對一個被刪除的答案發表評論時，他表示他將它改爲了一個按鈕，並且工作。 – djlumley

上面的評論釘了它。回到我的原始代碼，它神奇地工作。還有一個問題，我將如何去永久更改按鈕的背景圖像，所以如果我重新加載頁面，「other_background」會在那裏。 – user461316

您可以使用HTML5本地存儲（http://diveintohtml5.org/storage.html）來存儲狀態，然後在頁面加載時查詢該狀態？ – djlumley

小有一點題外話，但你應該考慮使用，而不是完全2個圖像獨立精靈。

爲什麼？由於較慢的連接和某些瀏覽器，因爲新圖像正在下載並加載，點擊事件將導致「閃爍」。精靈將會看到圖像已經加載，所以你只需要改變背景位置來加載新圖像。

來源

2011-07-12 02:46:04 Populus

設置精靈需要一些學習。但我同意，這是最好的選擇 – kheya

試試這個：

$（「＃鍵」），CSS（「背景圖片」，「URL（/images/otherbackground.png）」）;

$（本）的CSS（「背景圖片」，「URL（/images/otherbackground.png）」）;

來源

2011-07-12 02:49:10 kheya

更改按鈕背景顏色點擊本身

回答

相關問題