Question

I am trying to swap the selected class from tab to tab to display which one is current

Sample Code

$("li.selected").idTabs(function(id,list,set){ 
$("a",set).removeClass("selected") 
.filter("[@href='"+id+"']",set).addClass("selected"); 
for(i in list) 
  $(list[i]).hide(); 
$(id).fadeIn(); 
return false; 
}); 

so on click I am trying to remove and load the selected class with no luck, tried this

<ul class="idTabs">
  <li class="selected"><a href="#request-info">Request more information</a></li>
  <li><a href="#test-drive">Request a test drive</a></li>
  <li><a href="#make-offer">Make an offer</a></li>
  <li><a href="#get-quote">Get a quote</a></li>
</ul>

$('.idTabs li').click(function(){
$('.idTabs li').removeClass('selected');
  $(this).addClass('selected');
  return false;
});

Answer 1

Aaron, your second example seems like it should work, but only works on the first two list items for some reason. I added classes to the li’s to make the selector more specific and it works fine now.

<ul class="idTabs">
    <li class="navTab selected"><a href="#request-info">Request more information</a></li>
    <li class="navTab"><a href="#test-drive">Request a test drive</a></li>
    <li class="navTab"><a href="#make-offer">Make an offer</a></li>
    <li class="navTab"><a href="#get-quote">Get a quote</a></li>
</ul>

$('.navTab').click(function(){
    $('.navTab').removeClass('selected');
    $(this).addClass('selected');
    return false;
});

---

Regarding your comment below:

It works every time when you click on an li… does not work when clicking on the anchor text because the click handler is not attached to that. You should add “display: block;” to your anchor within your li to expand the click area to the entire li (you will need to remove the padding from your li and in turn pad your ‘a’ so that the entire li is clickable). then… move the click handler to the anchor and have it change the parent’s (li) class. I’m thinking it should go something like this (I’m not able to test it out right now):

$('.navTab a').click(function(){
    $('.navTab').removeClass('selected');
    $(this).parent().addClass('selected');
    return false;
});