【问题标题】：Add active class and change css of other items添加活动类并更改其他项目的 css
【发布时间】：2012-11-03 07:24:19
【问题描述】：

我有这个菜单

            <ul id="menu" class="clearfix">
                <li>
                    <a href="">Product 1</a>
                </li>
                <li>
                    <a href="">Product 2</a>
                </li>
                <li>
                    <a href="">Product 3</a>
                </li>
                <li class="last">
                    <a href="">Product 4</a>
                </li>
            </ul>

我想做这个效果。当您进入页面时，菜单项的文本颜色为白色。如果您单击一个项目，它会变为活动状态（保持白色文本），并且所有其他项目将其颜色更改为灰色，当您将鼠标悬停在一个项目上时，受影响的项目就是所有其他项目。

我已尝试使用 .addClass，但我只设法将活动类添加到当前项目，但没有更改第一次单击后不活动的其他项目。

有人知道最好的 jquery 方法吗？

【问题讨论】：

when you hover over one the affected items are all the others. 这是什么意思？
其他人知道了；）哈哈抱歉，你可能猜到英语不是我的主要语言

标签： javascript jquery html ajax

【解决方案1】：

$("#menu li").hover(function() {
    $(this).removeClass('grey').siblings().addClass('grey');
}, function() {
    $(this).addClass('grey').siblings('.active').removeClass('grey');
    //
}).on('click', function() {
    $(this).removeClass('grey').addClass('active').siblings().addClass('grey').removeClass('active')
});

http://jsfiddle.net/y7Cn5/

【讨论】：

这完全回答了这个问题，非常完美，谢谢！

【解决方案2】：

大概是这样的：

已更新，具有悬停功能

jsFiddle

$("#menu > li").on("click", function(e) {
    e.stopPropagation();
    $(".active").removeClass("active");
    $(this).removeClass("non-active").addClass("active").siblings().addClass("non-active");
})
.hover(function(e) {
    $(".non-hover").removeClass("non-hover");
    $(this).addClass("hover").siblings().addClass("non-hover");
}, function(e) {
    $(".hover, .non-hover").removeClass("hover non-hover");
})

如果这不能回答问题，那么问题就没有被理解，需要重新措辞，这就是问题中所问的一切

【讨论】：

这不回答是他的问题。
@Rikoshay 是的，它完全回答了这个问题
当然，现在在你之后......从你的 2 行答案编辑它
@Rikoshay 第一个小答案确实回答了这个问题，除了悬停，我也得到了，而你根本没有回答

【解决方案3】：

Here you go (siblings) 选择同一节点中的所有 OTHER 项

$("#menu li").click(function(){
  $(this).addClass("active").css("color","white")
  $(this).siblings().css("color","gray")
})

【讨论】：

这也不适用于悬停:(但它会进行主动更改
我错过了你问题的悬停部分，我的道歉
同样，在第二次单击 li 元素时，活动类不会被移除，因此这使得两个项目可能具有活动类

【解决方案4】：

试试

$("#menu > li").hover( function( ) {
    $(this).removeClass("hovered").siblings().addClass("hovered");
}, function( ) {
    $(this).addClass("hovered");
});

$("#menu > li").click( function( ) {
    $(this).addClass("active").siblings().removeClass("active");
});

【讨论】：