Change class of links with default values with jQuery
<p>I have three links on which I manually set classes: One defaults to <code>.active</code> and the others default to <code>.inactive</code>. 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 <code>.inactive</code> links - they switch to <code>.active</code>. However it doesn't work for the default <code>.active</code> link. If I click on the default <code>.active</code> link it stays inactive. </p>

<p>Default load:</p>

<p>Link 1 - Active
Link 2 - Inactive
Link 3 - Inactive</p>

<p>Clicking Link 2:</p>

<p>Link 1 - Inactive
Link 2 - Active
Link 3 - Inactive</p>

<p>Clicking Link 1 from Link 2:</p>

<p>Link 1 - Inactive
Link 2 - Active
Link 3 - Inactive</p>

<p>How can I complete this cycle so it works?</p>

<p><strong>Here is the HTML I'm generating:</strong></p>

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

<p><strong>The jQuery I'm using:</strong></p>

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