jQuery: Finding the correct element to remove a class
<p>Ok, somehow I'm just not able to figure out how to make this work, it can't be that difficult.</p>

<p>I have a plain old navigation, like so:</p>

<pre><code>&lt;ul&gt;
        &lt;li&gt;&lt;a href="#" class="men-trigger"&gt;Men's&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" class="women-trigger"&gt;Women's&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" class="coed-trigger"&gt;Coed&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" class="all-trigger"&gt;All&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And I need to add a class to the clicked element (which I know how to do):</p>

<pre><code>$('.men-trigger').click(function() {  
   $(this).addClass('active');   
});
</code></pre>

<p>What I'm having problems with is how to remove the class <code>active</code> from a nav item when another nav item is clicked.</p>

<p>I've tried something like but it doesn't work:</p>

<pre><code>$('.men-trigger').click(function() {  
    $(this).addClass('active');
    $(this).prev().siblings().find('active').removeClass('active');
});
</code></pre>

<p>I've tried using <code>.parent().siblings().children();</code>, <code>.parents(ul).find('active');</code> and I still haven't been able to make it work.</p>

<p>I created a <strong><a href="http://jsfiddle.net/rzea/Vyeaf/3/" rel="nofollow">Demo</a></strong> of this.</p>

<p>NOTE: Each nav element needs to have its own class because I'm doing something else in the script, here I'm just showing you the problem I'm having.</p>

<p>Thanks in advance for any help on this.</p>
