jquery - 为基于 Sprite 的导航设置菜单事件状态，其中每个类名称都是唯一的

Question

我想知道如何使用 JQuery 来做到这一点。我有一个菜单，其中每个元素的类名都必须是唯一的，因为该元素的 css 选择所有菜单项共享的 Sprite 的唯一背景位置。因此，当单击该元素时，我还需要触发一个唯一的事件状态类名称。最好的方法是什么？这是我的代码:

HTML

<div id="menu">
    <a href="javascript:void(0);" class="trailer">Trailer</a>
    <a href="javascript:void(0);" class="bios">Bios</a>
    <a href="javascript:void(0);" class="photos">Photos</a>
    <a href="javascript:void(0);" class="synopsis">Synopsis</a>
    <a href="javascript:void(0);" class="news">News</a>
</div>

CSS

#menu a { background: url(../images/menu.png) no-repeat; height:16px; overflow:hidden; display:block; text-indent:-10000px; float:left; margin-left:63px;}
#menu a:first-child { margin-left: 0;}
#menu a.trailer { width: 91px;}
#menu a.trailer:hover, #menu a.trailer_active { background-position: 0px -20px;}
#menu a.bios { width: 50px;  background-position: -153px 0;}
#menu a.bios:hover, #menu a.bios_active { background-position: -153px -20px;}
#menu a.photos { width:86px; background-position: -272px 0;}
#menu a.photos:hover, #menu a.photos_active { background-position: -272px -20px;}
#menu a.synopsis { width:103px; background-position: -423px 0;}
#menu a.synopsis:hover, #menu a.synopsis_active { background-position: -423px -20px;}
#menu a.news { width:62px; background-position: -579px 0;}
#menu a.news:hover, #menu a.news_active { background-position: -579px -20px;}

Answer 1

在你的 jquery 中使用它

$('#menu>a').click(function() {
  $(this).addClass('active')
}

并更改 css 中的“事件”规则，如下所示:

#menu a.trailer:hover, #menu a.trailer.active { background-position: 0px -20px;}

所以用点而不是下划线