jQuery技术:通过链接替换精灵图像

我希望默认情况下在div中显示我的精灵的一部分，然后在div下方有一个文本菜单，当点击不同的链接时，显示的精灵部分会发生变化。

这是我到目前为止的地方，并让我的精灵全部显示以下内容：

指数

CSS

 .sprite { background-image: url(sprite1.png); background-repeat: no-repeat; display: block; } .sprite-caramel { width: 176px; height: 250px; background-position: 0 0; } .sprite-chocolate { width: 176px; height: 250px; background-position: -176px 0; } .sprite-empty { width: 176px; height: 250px; background-position: -352px 0; } .sprite-strawberry { width: 176px; height: 250px; background-position: -528px 0; } .sprite-vanilla { width: 176px; height: 250px; background-position: -704px 0; } 

我想要做的是在div中默认显示“空”，然后在div下面有“chocolate”“vanilla”“strawberry”等文本链接。当点击链接时，精灵位置会变为反映点击链接的图像。

当我用谷歌搜索时，我似乎只能在hover时找到图像替换…

我是精灵100％新手，直到现在才使用它们。

  
 Caramel Chocolate Empty Strawberry Vanilla 

  .sprite { background-image: url(https://puu.sh/3orSM.png); background-repeat: no-repeat; display: block; width: 176px; height: 250px; } .sprite-caramel { background-position: 0 0; } .sprite-chocolate { background-position: -176px 0; } .sprite-empty { background-position: -352px 0; } .sprite-strawberry { background-position: -528px 0; } .sprite-vanilla { background-position: -704px 0; } 

  jQuery(document).on("ready", function() { jQuery('.flavor').bind('click', function(e) { jQuery('#tumbler').attr('class', 'sprite sprite-' + jQuery(this).data('flavor')); e.stopPropagation(); }); }); 

以上就是jQuery教程分享通过链接替换精灵图像相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。