添加活动类并更改其他项的css

Question

我有这个菜单

            <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方法吗？

Answer 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/

Answer 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");
})

如果这不能回答问题，那么这个问题就不会被理解，需要一些重新措辞，这就是问题中提到的一切

Answer 3

这里你去（兄弟姐妹）选择同一节点中的所有其他项目

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

Answer 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");
});