活动菜单背景颜色

Question

我有竖排菜单。它是.glossymenu。使用css as .glossymenu a.menuitem可以访问菜单项。当菜单项被选中或菜单项处于活动状态时，我想要更改背景颜色。我正在尝试使用以下JQuery：

$(".glossymenu a.menuitem").click(function(){
  $(this).siblings(".active").removeClass("active");
  $(this).addClass("active");
});

但是，我不能用这个解决我的问题。任何想法，如何更改菜单项的背景颜色，当它被选中时。当菜单处于活动状态时，当我们在空白区域中的菜单项之外单击时，它不应该改变。谢谢，Prasad

Answer 1

假设这是您的html的样子：

<ul class="glossymenu">
    <li><a class="menuitem active" href="#">Item</a></li>
    <li><a class="menuitem" href="#">Item</a></li>
    <li><a class="menuitem" href="#">Item</a></li>
</ul>​

CSS如下所示：

.glossymenu li {
    margin-bottom: 20px;
}

.glossymenu a {
    background-color: pink;
    padding: 5px 10px;
}

.glossymenu .active {
    background-color: #bada55;
}​

那么你的js应该是这样的：

$('.glossymenu .menuitem').on('click', function(e) {
    e.preventDefault();
    $('.glossymenu .active').removeClass('active');
    $(this).addClass('active');
});

你可能会遇到的问题是，siblings()不会选择任何其他锚点标签，因为它们不是被点击的锚点的兄弟。

jsFiddle：http://jsfiddle.net/Vestride/qhSQ4/

编辑：

我为你做了一个新的jsfiddle (link)，但是我仍然很困惑你想做什么，以及你让脚本更通用是什么意思。

也许这会帮助你解决问题。http://sixrevisions.com/javascript/20-excellent-javascript-navigation-techniques-and-examples/

Answer 2

我认为您应该使用jQuery的悬停功能。

$(".glossymenu a.menuitem").hover(function(){
  $(this).siblings(".active").removeClass("active");
  $(this).addClass("active");
}, function() {
  $(this).removeClass("active");
});

Answer 3

活动状态在CSS中可用，最好使用该状态。

a.menuitem:active { background-color: #c00; }