我个人只会使用JavaScript代码在两个类之间切换。

让CSS在你的div上勾勒出你需要的一切减去背景规则，然后添加两个类(例如:扩展和折叠)作为规则，每个规则都具有正确的背景图像(或背景位置，如果使用精灵)。

不同图片的CSS

.div {
    /* button size etc properties */
}

.expanded {background: url(img/x.gif) no-repeat left top;}
.collapsed {background: url(img/y.gif) no-repeat left top;}

或CSS与图像精灵

.div {
    background: url(img/sprite.gif) no-repeat left top;
    /* Other styles */
}

.expanded {background-position: left bottom;}

然后……

带有图像的JavaScript代码

$(function){
    $('#button').click(function(){
        if($(this).hasClass('expanded'))
        {
            $(this).addClass('collapsed').removeClass('expanded');
        }
        else
        {
            $(this).addClass('expanded').removeClass('collapsed');
        }
    });
}

JavaScript与精灵

注意:优雅的toggleClass在ie6中不起作用，但是下面的addClass/removeClass方法在这种情况下也可以很好地工作

最优雅的解决方案(不幸的是Internet Explorer 6不友好)

$(function){
        $('#button').click(function(){
            $(this).toggleClass('expanded');
        });
    }

$(function){
        $('#button').click(function(){
            if($(this).hasClass('expanded'))
            {
                $(this).removeClass('expanded');
            }
            else
            {
                $(this).addClass('expanded');
            }
        });
    }

据我所知，这种方法可以跨浏览器工作，而且比起在脚本中修改URL，我更喜欢使用CSS和类。

这是一个相当简单的响应，使用项目列表更改网站的背景

function randomToN(maxVal) {
    var randVal = Math.random() * maxVal;
    return typeof 0 == 'undefined' ? Math.round(randVal) : randVal.toFixed(0);
};
var list = [ "IMG0.EXT", "IMG2.EXT","IMG3.EXT" ], // Images
    ram = list[parseFloat(randomToN(list.length))], // Random 1 to n
    img = ram == undefined || ram == null ? list[0] : ram; // Detect null
$("div#ID").css("backgroundImage", "url(" + img + ")"); // push de background

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

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

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

我使用正则表达式，因为我想保留一个相对路径，而不使用添加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);
                }
            }
        );

一种方法是把两个图像放在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>

我在一个论坛上找到了一个解决方案，切换背景Img。