javascript - 单击本身更改按钮背景颜色

Question

假设我有一个带有给定背景图像的#button:url(images/some_background)，我想在单击它时将其更改为另一个背景，假设为 url(images/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)');

        });

});

Answer 1

这对我有用

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/

显然，您需要为自己切换图像。

如果遇到问题，请检查

1. 您首先调用 jQuery 脚本，然后再调用此脚本。

2. 您的图片路径正确。