1

如何在单击事件发生后使用 jquery 切换 li id='' 精灵背景，并在单击另一个导航元素时将其切换回其原始状态，该元素也将切换到另一个精灵图像......我只使用改变的 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>

CSS代码：

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:relative;top:0;}
#navlist li, #navlist a{height:40px;display:block;}

#ico1{width:73px;height:40px;background:url(../img/sprite.png) no-repeat -96px 0px;transition: 500ms ease-in-out;}

#ico1:hover{width:96px;height:40px;background:url(../img/sprite.png) no-repeat 0px 0px;transition: 500ms ease-in-out;}

.... ETC

这是示例：http: //jsfiddle.net/facemoi/nvQRf/

4

1 回答 1

2

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

.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 的情况下是可能的，但是您需要在标记中添加隐藏的单选按钮并制作图标标签

于 2013-01-26T19:53:57.233 回答