[jQuery] add/removeClass problem

[yellowboy]

Problem:
I have two divs, each containing tab navigation. When I click tab navigation
items they receive class 'selected' while the previously clicked tab anchors
retain 'selected' class as well. 

My intention is that with click of tab, other tabs drop the selected class. 

jquery:

$(function () {
 $('div.tabs').each(function () {
  var tabContainers = $('> div', this);

  $('ul.tabNavigation a', this).click(function () {
    tabContainers.hide().filter(this.hash).show();
        $('ul.tabNavigation a', this).removeClass('selected');
    $(this).addClass('selected');
        return false;
  }).filter(':first').click();
 });
});


html:

<div>
<h2> # Photography </h2>

<div class="gallery">

<div class="tabs">
<ul class="tabNavigation">
<li> #first Alternative Process </li>
<li> #second Black &amp; White </li>
<li> #third Digital </li>
</ul>
           
<div id="first">                                
<ul class="altpro">
<li> /imgs/main/ap1b.jpg </li>
<li> /imgs/main/ap1b.jpg </li>
<li> /imgs/main/ap1b.jpg </li>
</ul>                                           
</div><!--end first-->

<div id="second">                     
<ul class="bandw">
<li> /imgs/main/perf1.jpg </li>
<li> /imgs/main/perf2.jpg </li>
<li> /imgs/main/perf3.jpg </li>
</ul>                                 
</div><!--end second -->

<div id="third">                     
<ul class="digclr">
<li> /imgs/main/perf1.jpg </li>
<li> /imgs/main/perf2.jpg </li>
<li> /imgs/main/perf3.jpg </li>
</ul>                                 
</div><!--end third-->

</div><!--end tabs-->
</div><!--end gallery-->

</div><!--end photography-->

Thanks! 

-- 
View this message in context: 
http://www.nabble.com/add-removeClass-problem-tp19536474s27240p19536474.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.