Writing JQuery If Statement

Question

I am trying to write a JQuery If Statement.. What I am trying to achieve is basically to highlight the appropriate link (a) when the certain div (infotab) is clicked. They are all hidden as you can see, but when clicked, become visible in a nice fade. I want to highlight the item that was clicked. (Change the background color to whatever I want, such as red in the code below.)

The code I have below works, but incorrectly. It highlights all of the a's in that div. I just want the one highlighted that was clicked. Thanks for your help you guys are great.

$(document).ready(function () {
    $('#infotab_two_s, #infotab_three_s, #infotab_four_s, #infotab_five_s').hide();
});

$('.subnav_holster li').click(function () {
    var Vinfotab = this.id + '_s';
    $('.infotab:visible').fadeOut('fast', function () {
        $('#' + Vinfotab).fadeIn('fast');
        var Vinfotab_selected = 'Vinfotab:visible';
        $("subnav_holster li a").css({
            "color": "red"
        });
    });
});

BoltClock · Accepted Answer · 2011-03-26 03:38:06Z

2

Grab the li that was clicked and access that element's a:

$('.subnav_holster li').click(function () {
    var Vinfotab = this.id + '_s';
    var clicked = $(this);
    $('.infotab:visible').fadeOut('fast', function () {
        $('#' + Vinfotab).fadeIn('fast');
        var Vinfotab_selected = 'Vinfotab:visible';
        clicked.find('a').css({
            "color": "red"
        });
    });
});

answered Mar 26, 2011 at 3:38

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Josh Over a year ago

wonderful!!!! Now how could I change i remove the color though if another li is clicked?

BoltClock Over a year ago

@Josh: After the clicked.find('a') bit, do clicked.siblings().find('a').css({ "color": "white" });. This turns the other li a elements back to white.

Josh Over a year ago

doesn't seem to work.. If another li is clicked, I don't want the original to be red. I want the current button to be the color, not allow all of them to be red. Do you get it

BoltClock Over a year ago

@Josh: Oh, right. The clicked.find() and clicked.siblings() bits need to be moved out of the fade function for it to work properly.

mVChr · Accepted Answer · 2011-03-26 03:47:03Z

1

You should cache this and then highlight it:

$('.subnav_holster li').click(function () {
    var Vinfotab = this.id + '_s',
        $this = $(this);
    $('.infotab:visible').fadeOut('fast', function () {
        $('#' + Vinfotab).fadeIn('fast');
        var Vinfotab_selected = 'Vinfotab:visible';
        $('.subnav_holster li a').css({
            "background-color": "white" // reset all to default color
        });
        $this.find('a').css({
            "background-color": "red"   // set highlight to this element only
        });
    });
});

edited Mar 26, 2011 at 3:47

answered Mar 26, 2011 at 3:39

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

4 Comments

Josh Over a year ago

why cache this? Also is it possible to remove the effect if another div is selected?

mVChr Over a year ago

That's what the line with // reset all to default color is for

Josh Over a year ago

I mean if another tab is clicked, the original tab will still be red. I want it to go back to white. Do you get it?

mVChr Over a year ago

I updated my answer with the color you specified... do you get it?

Collectives™ on Stack Overflow

Writing JQuery If Statement

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related