Issue with changing class names using javascript/jquery

Question

I'm looking to change the background color of the currently clicked on tab in my navigation menu. Then when I click a different tab, I want the old one to change back to the original background color. I've seen this tons of places, but every tutorial I follow hasn't worked for me.

Here is the html code I have for the navigation. Basically, I want to change the class "member_nav" to "member_nav_clicked" and then back to "member_nav" when a different tab is clicked.

<div class="member_nav">
    <a href="javascript:;" onclick="javascript:nav1(); load_video('6')">Nav 1</a>
</div>
<div class="member_nav">
    <a href="javascript:;" onclick="javascript:nav2(); load_video('2')">Nav 2</a>
</div>
<div class="member_nav">
    <a href="javascript:;" onclick="javascript:nav3(); load_video('4')">Nav 3</a>
</div>
<div class="member_nav">
    <a href="javascript:;" onclick="javascript:nav4(); load_video('5')">nav 4</a>
</div>
<div class="member_nav">
    <a href="javascript:;" onclick="javascript:nav5(); load_video('3')">Nav 5</a>
</div>

I'm not going to include any of the javascript functions I've tried, since none of it was working.

You're more likely to get a good answer if you DO include the code you tried. We know it's not working - that's why you're here! That gives people something to fix, rather than starting from scratch. — user27414
– user27414, Commented Apr 18, 2014 at 19:02
So what does all the inline javascript do, and are you clicking the DIV's or the anchors, it's not the same thing. — adeneo
– adeneo, Commented Apr 18, 2014 at 19:04
@JonB and other downvoters, sorry i was using SO from my mobile, so i posted that as an answer by mistake. i was making that as a comment. Removed that answer. — Vinay Pratap Singh Bhadauria
– Vinay Pratap Singh Bhadauria, Commented Apr 18, 2014 at 19:08
I've updated a copy of adeneo's fiddle to put the script in with the HTML. It would usually go in the <head> not in the body; or I always put that sort of thing in a separate .js file that is linked in from the page. — Stephen P
– Stephen P, Commented Apr 18, 2014 at 19:40

adeneo · Accepted Answer · 2014-04-18 19:12:55Z

2

Add an active class, then on a click event find the currently active element and remove the active class with $('.active').removeClass('active') after this set the active class to the clicked element $(this).addClass('active').

@adeneo's anwser in the comments is actually better.

$(this).addClass('active').siblings().removeClass('active');

edited Apr 18, 2014 at 19:12

adeneo

319k29 gold badges410 silver badges392 bronze badges

answered Apr 18, 2014 at 19:04

bobthedeveloper

3,7832 gold badges17 silver badges31 bronze badges

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

Comments

Barry Meijer · Accepted Answer · 2014-04-18 19:10:37Z

0

To be honest, this is some jQuery 101... i suggest you read up on the basics. I set up a jsFiddle for you, and i hope you wont just copy paste it but also try to learn something from it.

You can find it here: http://jsfiddle.net/wUpYh/1/

The code:

 $('a').on('click', function(){
            $('.member_nav_clicked').removeClass('member_nav_clicked').addClass('member_nav');       
            $(this).closest('.member_nav').removeClass('member_nav').addClass('member_nav_clicked');
        });

So what happens is, i remove the member_nav class and add the clicked class. The line above it will take care of the previous clicked item. When an element has the active class, it will be removed before asigning it to the new clicked element.

But to be honest, a nicer way of doing this, would be to assign an active class and leave the normal class as it is. Like this:

$('a').on('click', function(){
                $('.member_nav_clicked').removeClass('member_nav_clicked');       
                $(this).closest('.member_nav').addClass('member_nav_clicked');
            });

answered Apr 18, 2014 at 19:10

Barry Meijer

7604 silver badges16 bronze badges

1 Comment

programmingnewb Over a year ago

Thanks for the response. I've tried implementing this and it didn't work for me. I understand why it should work, but every solution I've found on here isn't getting it done in my case. Been trying for over four hours.

Collectives™ on Stack Overflow

Issue with changing class names using javascript/jquery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related