html - 单击时更改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';" />;