Move "current" class between tab menu based on Selection

Question

Hi,

I have the following HTML code based on a tab menu format, i.e:

 <div id="listnav">
  <ul id="nav">
     <li id="home"><a href="#" id="current">Home</a></li>
     <li id="features"><a href="#">Features</a></li>
     <li id="whysp"><a href="#">Why sP</a></li>
     <li id="screenshots"><a href="#">Screen Shots</a></li>
     <li id="faq"><a href="#">FAQ</a></li>
     <li id="contactus"><a href="#">Contact Us</a></li>
   </ul>
 </div>

When first coming into the web page, my Home tab is set as current based on the id="current" within the a href tag.

My question is, when the user clicks on the "Features" tab, how can I through jQuery, remove the class=current from the Home tab and add to the Features a href tag, so that my Features tab now displays as te current tab and so on with the others?

I also have the following jQuery functions:

$("#home").click(function(){
    $("#content").load('home.html');
});

$("#features").click(function(){
    $("#content").load('features.html');
});

Any help would be great.

Thanks.

Answer 1

Try this:

$('#nav a').click(function(){
 $(this).attr('id','current').parent('li').siblings()
        .children('a').removeAttr('id');
});

Answer 2

i think you could use a class named 'current' and then remove/add using .removeClass() and .addClass().

Answer 3

$("#features").click(function(){
    $("#current").removeAttr("id");
    $("#features a").attr("id", "current");
    $("#content").load('features.html');
});

I would recommend to use a class current instead of an ID

Answer 4

$('#nav a').click(function(){
   $("#nav").find("a").removeAttr("id");
   $(this).attr("id" , "current" );
});

Answer 5

No need to repeat your navigation code for each link :-)

$("#nav li a").click(function()
{
    // Remove old current
    $("#current").removeAttr("id");
    // Set new current
    $(this).attr("id", "current");
    // Load content for clicked nav
    $("#content").load($(this).closest("li").attr("id") + '.html');
    // Prevent click from jumping to the top of the page
    return false;
});