如何在单击事件发生后使用 jquery 切换 li id='' sprite 背景,并在单击另一个导航元素时将其切换回其原始状态,该导航元素也会切换到另一个 sprite 图像.... 当我将鼠标悬停在元素上时,我只使用 CSS 更改背景。它工作正常,但我真正想要的是在单击后出现的第二个 Sprite 图像,在我单击另一个导航元素之前不会更改。
这是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;}
....等等
最佳答案
假设您有一个所有列表项都继承的公共(public)类:
.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');
});
( a demo )
这实际上在没有 javascript 的情况下是可能的,但是您需要在标记中添加隐藏的单选按钮并制作图标标签
关于jquery - 如何使用 jquery 切换 li id ='' Sprite 背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14540873/