I have this menu

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

I want to make this effect. when you enter the page the text color of the menu items are white. If you click on one item it bees active (keeping the white color text) and all the other items change it's color to gray, also when you hover over one the affected items are all the others.

I have tried with the .addClass but I have only managed to add the active class to the current item, but not change the others that aren´t active after the first click.

Anyone know the best jquery approach to this?

I have this menu

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

I want to make this effect. when you enter the page the text color of the menu items are white. If you click on one item it bees active (keeping the white color text) and all the other items change it's color to gray, also when you hover over one the affected items are all the others.

I have tried with the .addClass but I have only managed to add the active class to the current item, but not change the others that aren´t active after the first click.

Anyone know the best jquery approach to this?

• javascript
• jquery
• html
• ajax

• when you hover over one the affected items are all the others. What does this mean? – Justin Morgan Commented Nov 14, 2012 at 18:38
• the other people got it ;) haha sorry, as you may have guessed english is not my main language – codek Commented Nov 14, 2012 at 18:40

4 Answers 4

$("#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/y7Cn5/

Perhaps something like this:

Updated, with hover functionality

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

and if this doesn't answer the question, then the question is not understood and needs some rewording, this is everything asked about in the question

Here you go (siblings) selects all OTHER items in the same node

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

Try

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

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