Question

我有一个垂直菜单。这是.glossymenu。使用css作为.glossymenu a.menuitem访问菜单项。我想在选择菜单项或菜单项处于活动状态时更改背景颜色。我正在尝试使用以下JQuery：

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

但是，我无法使用此解决我的问题。任何想法，如何更改菜单项的背景颜色，何时被选中。当菜单处于活动状态时，当我们在空白区域中单击菜单项外部时，它不应该更改。谢谢，普拉萨德

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; }

活动菜单背景颜色

3 个答案: