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

Answer 1

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