单击时更改CSS中的背景图像

Question

请有人告诉我如何执行以下操作

.logo {
display: block;
text-indent: -9999px;
text-transform: capitalize;
background: url(../images/menu.png) no-repeat;
height: 120px;
}

点击后更改图片

background: url(../images/menu_open.png) no-repeat;

HTML的目的是

<div class="sidebar">
<a href="#" onclick="return showOrHide('menulink');"><div class="logo">TEST IMAGE</div></a>
<ul id="menulink">

目前，当点击图标时，菜单会打开和关闭，

查看完整代码 http://carbonyzed.co.uk/menu/2/index.html http://carbonyzed.co.uk/menu/2/css/style.css

由于

Answer 1

$(".logo").click(function() {
  $(this).css('background-image', 'url(../images/menu_open.png)');
});

Answer 2

为获得最佳用户体验，请考虑使用精灵，并在单击时更改类，而不是更改样式属性。所以假设你在一个精灵中有两个图像，叫做menu_sprite.png

图像高240像素，标识宽度。默认图像位于左上角，“打开”图像位于右下方。

CSS

.logo{
  background-image: url(../images/menu_sprite.png) 0 0 no-repeat;
}

.logo.open{
  background-position: 0 -120px;
}

的jQuery

$('.logo').click(function(){ $(this).toggleClass('open'); });

此方法可让您避免在没有使用预加载器的情况下进行没有图像的瞬间分割。

Answer 3

这应该有效

<a href="#" onclick="return ShowOrHide('menulink'); document.getElementById('id').style.background = 'url(img.img) no-repeat';" />;