Swap a class of an <li> on click

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

Give all your tabs a class like 'tab', then try something along the lines of this:

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

Answer 2

You haven't really said what the problem is, but I'm guessing your selectors aren't quite right. You seem to be passing in the "set" class as a second argument, rather than as part of the selector string.

Try:

  $("a," + set).removeClass("selected")

and

   .filter("[@href='"+id+"']" + set)

Answer 3

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