Question

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?

Answer 1

try this:

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