jq加css制作图片切换,使用jQuery切换DIV背景图像

翻翻过去那场雪

我个人只是使用JavaScript代码在2个类之间切换。让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在Internet Explorer 6中不起作用，但是下面的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和类玩起来更舒服。