Question

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

Answer 1

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