CODEWITHSUNDEEP
javascriptjquerycssclass
Aaron R
Aaron R

Reputation: 233

Swap a class of an <li> on click

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

Upvotes: 0

Views: 2150

Answers (3)

Luke
Luke

Reputation: 597

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

Upvotes: 2

womp
womp

Reputation: 116977

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)

Upvotes: 0

PHLAK
PHLAK

Reputation: 22497

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

Upvotes: 0

Related Questions