Change class of links with default values with jQuery

Question

I have three links on which I manually set classes: One defaults to .active and the others default to .inactive. I have some jQuery that I'm using to toggle the class of the links when they are clicked for CSS purposes. This works for the .inactive links - they switch to .active. However it doesn't work for the default .active link. If I click on the default .active link it stays inactive.

Default load:

Link 1 - Active Link 2 - Inactive Link 3 - Inactive

Clicking Link 2:

Link 1 - Inactive Link 2 - Active Link 3 - Inactive

Clicking Link 1 from Link 2:

Link 1 - Inactive Link 2 - Active Link 3 - Inactive

How can I complete this cycle so it works?

Here is the HTML I'm generating:

<ul id="infoContainer">
  <li><a href="/profiles/1/profile_cred" class="active" data-remote="true">Cred</a></li>
  <li><a href="/profiles/1/profile_about" class="inactive" data-remote="true">About</a></li>
  <li><a href="/profiles/1/profile_questions" class="inactive" data-remote="true">Questions</a></li>
</ul>

The jQuery I'm using:

$(function(){
    var sidebar=$('#sidebar');
    sidebar.delegate('a.inactive', 'click',function(){
        sidebar.find('.active').toggleClass('active inactive');
        $(this).toggleClass('active inactive');
    });
});

What do you mean by saying the default active stays inactive? — pimvdb
– pimvdb, Commented Oct 29, 2011 at 14:02
It seems like it works fine: jsfiddle.net/pimvdb/WuqNG. Clicking link 2 and then 1 again switches classes correctly. — pimvdb
– pimvdb, Commented Oct 29, 2011 at 14:14

SunnyRed · Accepted Answer · 2011-10-29 14:16:29Z

2

If I do get you correct, your selector is too strict: handling only the inactive links.
Tried the following?

$(function(){
    var sidebar=$('#sidebar');
    sidebar.delegate('a', 'click',function(){
        sidebar.find('.active').toggleClass('active inactive');
        $(this).addClass('active').removeClass('inactive');
    });
});

edited Oct 29, 2011 at 14:16

answered Oct 29, 2011 at 14:09

SunnyRed

3,5454 gold badges38 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

Change class of links with default values with jQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related