如何切换li id=''；使用jquery的sprite背景

如何在单击事件发生后使用jquery切换li id=''精灵背景，并在单击另一个也将切换到另一个精灵图像的nav元素时将其切换回其原始状态。。。。 当我将鼠标悬停在元素上时，我只使用改变背景的CSS。。它的工作很好，但我真正想要的是第二个精灵图像出现在点击后不要改变，直到我点击另一个导航元素

下面是html代码

<ul  id="navlist">
<li id="ico1"><a href="#"></a></li>
<li id="ico2"><a href="#"></a></li>
<li id="ico3"><a href="#"></a></li>
<li id="ico4"><a href="#"></a></li>
<li id="ico5"><a href="#"></a></li>
<li id="ico6"><a href="#"></a></li>
<li id="ico7"><a href="#"></a></li>
<li id="ico8"><a href="#"></a></li>

。。。。等

---

下面是一个示例：

假设您有一个所有列表项都继承的公共类：

.ico{
   background: url(images/sprite.jpg);
}

现在为每个项目和悬停/活动状态创建类：

.ico1{
   background-position: 0 12px;
}

.ico1:hover{
   background-position: 0 24px;
}

.ico1.active{
   background-position: 0 32px;
}

...

使用jQuery，您只需单击鼠标即可切换

active

类

$('li').click(function(){

  // remove active class for all other list items
  $(this).parents('ul').find('li').not(this).removeClass('active');

  // add active class on this item
  $(this).addClass('active');
});

（）

---

这实际上在没有javascript的情况下是可能的，但是您需要在标记中添加隐藏的单选按钮，并使图标标签

CSS不处理单击状态。您最好使用JavaScript向单击的导航添加/删除一个

active

类，并使用该类设置您的背景属性。可以简化为

$（'li.active'）。removeClass（'active'）$('li').click(function(){

  // remove active class for all other list items
  $(this).parents('ul').find('li').not(this).removeClass('active');

  // add active class on this item
  $(this).addClass('active');
});