admin管理员组

文章数量:1024626

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

Share Improve this question Follow asked Nov 14, 2012 at 18:24 codekcodek 34355 gold badges2020 silver badges4949 bronze badges 2

• 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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

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

Share Improve this question Follow asked Nov 14, 2012 at 18:24 codekcodek 34355 gold badges2020 silver badges4949 bronze badges 2

• 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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

本文标签： javascriptAdd active class and change css of other itemsStack Overflow