一种方法是把两个图像放在HTML中，在SPAN或DIV中，你可以用CSS隐藏默认值，或者用JS隐藏页面加载。然后你可以切换到点击。下面是一个类似的例子，我用来把左/下图标放在列表上:

$(document).ready(function(){
    $(".button").click(function () {
        $(this).children(".arrow").toggle();
            return false;
    });
});

<a href="#" class="button">
    <span class="arrow">
        <img src="/images/icons/left.png" alt="+" />
    </span>
    <span class="arrow" style="display: none;">
        <img src="/images/down.png" alt="-" />
    </span>
</a>

$('#divID').css("background-image", "url(/myimage.jpg)");  

应该这样做，只是在元素上的点击事件中连接它吗

$('#divID').click(function()
{
  // do my image switching logic here.
});

CSS精灵效果最好。我尝试切换类和使用jQuery操纵'background-image'属性，没有工作。我认为这是因为浏览器(至少是最新的稳定Chrome)不能“重新加载”已经加载的图像。

好处:CSS精灵下载和显示速度更快。更少的HTTP请求意味着更快的页面加载。减少HTTP的数量是提高前端性能的最佳方法，所以我建议一直走这条路。

一种方法是把两个图像放在HTML中，在SPAN或DIV中，你可以用CSS隐藏默认值，或者用JS隐藏页面加载。然后你可以切换到点击。下面是一个类似的例子，我用来把左/下图标放在列表上:

$(document).ready(function(){
    $(".button").click(function () {
        $(this).children(".arrow").toggle();
            return false;
    });
});

<a href="#" class="button">
    <span class="arrow">
        <img src="/images/icons/left.png" alt="+" />
    </span>
    <span class="arrow" style="display: none;">
        <img src="/images/down.png" alt="-" />
    </span>
</a>

如果你为背景图像使用CSS精灵，你可以根据你是在展开还是折叠背景偏移+/- n个像素。不是切换，但比切换背景图像url更接近切换。

我使用正则表达式，因为我想保留一个相对路径，而不使用添加addClass函数。我只是想让它变得复杂，哈哈。

$(".travelinfo-btn").click(
            function() {
                $("html, body").animate({scrollTop: $(this).offset().top}, 200);
                var bgImg = $(this).css('background-image')
                var bgPath = bgImg.substr(0, bgImg.lastIndexOf('/')+1)
                if(bgImg.match(/collapse/)) {
                    $(this).stop().css('background-image', bgImg.replace(/collapse/,'expand'));
                    $(this).next(".travelinfo-item").stop().slideToggle(400);
                } else {
                    $(this).stop().css('background-image', bgImg.replace(/expand/,'collapse'));
                    $(this).next(".travelinfo-item").stop().slideToggle(400);
                }
            }
        );