javascript - 活动菜单背景颜色

Question

我有一个垂直菜单。它是 .glossymenu 。使用 css as .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

活动状态在 CSS 中可用，最好使用它来代替。

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

Answer 3

我想你想使用 jQuery 的悬停功能。

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