CODEWITHSUNDEEP
jqueryaddclassremoveclass
Timothy Knautz
Timothy Knautz

Reputation: 3

Tabs by hand with addClass and removeClass

I am trying to write, what I thought was, a simple jQuery function to switch the look of a selected vs. not-selected tab. Here is what I have:

CSS:

ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
  display: block; 
  float: left; 
  height: 20px;
  padding: 6px 28px 5px 22px;
  text-align: center;
  color: #FFF;
  text-decoration: none;
  background: #635B53 url(../images/tab.png) no-repeat 100% 0;}

ul#menu li.selected 
{ margin: 2px 2px 0 0;
  background: #635B53 url(../images/tab_selected.png) no-repeat 0 0;}

HTML:

<ul id="menu">
  <li id="menuHome"><a href="home.html">Home</a></li>
  <li id="menuNews"><a href="news.html">News</a></li>
  <li id="menuDownloads"><a href="downloads.html">Downloads</a></li>
  <li id="menuFeedback"><a href="feedback.html">Feedback</a></li>
  <li id="menuContact"><a href="contact.html">Contact Us</a></li>
</ul>

jQuery:

$('#menu li a').live ( 'click', function()
{
    $(this).parent().find('a.selected').removeClass('selected');
    $(this).parent().addClass('selected');
});

What happens is this: I click one of the tabs, the tab changes to the lighter color as it should, then it switches back to the original dark gray. I've run it in FireBug and it clearly shows that the jQuery function changes the tab to the light color, but when I "continue", and the program goes back into the jQuery library, it switched it back to the original!

I have tried everything I can think of... a little help?!?

UPDATE

Even if we do not worry about removing the selected class from the wrapped set and simply concentrate on adding the class, the JQ code still performs the same. In other words, this:

$('#menu li a').live ( 'click', function()
{
    $(this).parent().addClass('selected');
});

"Flashes" the light color - it displays the lighter color then immediately returns to the darker color. Yikes! Someone is changing it back... who?

Upvotes: 0

Views: 1961

Answers (3)

Taha Paksu
Taha Paksu

Reputation: 15616

try this: 

$('#menu li a').live ('click', function()
{
    $("a",$(this).parents("ul")).removeClass('selected');
    $(this).addClass('selected');
});​

Upvotes: 4

Eli Sand
Eli Sand

Reputation: 1032

The problem is in your jQuery code. Your first line uses .parent() which will just go up to the li element of the a element that was clicked. The .find() call then searches that li... it does NOT search any of the adjacent li elements which is what you're intending.

What you want to do instead is use $(this).closest('ul').find('a.selected').removeClass('selected'). The next line you want to add the "selected" class to the a element, so you'd want $(this).addClass('selected') instead (notice you don't need/want to use .parent() here).

Upvotes: 1

Phil
Phil

Reputation: 1308

Try this:

$("#menu li > a").click(function() {
    parentLi = $(this).closest("li");
    parentLi.hasClass("selected")?(
        parentLi.removeClass("selected")
    ):(
        parentLi.addClass("selected"),
        parentLi.siblings().removeClass("selected")
    )
});

Upvotes: 0

Related Questions