Déplacer classe « en cours » entre menu de l'onglet basé sur la sélection

Question

Je le code HTML suivant basé sur un format de menu de l'onglet, à savoir:

<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> 

Lors de la première entrant dans la page Web, mon onglet Accueil est défini comme courant basé sur l'id = "current" dans la balise a href. Ma question est, quand l'utilisateur clique sur l'onglet "Caractéristiques", comment puis-je via jQuery, supprimer le class = current de l'onglet Accueil et ajouter à la balise Features a href, de sorte que mon onglet Features affiche maintenant comme onglet actuel et ainsi de suite avec les autres?

J'ai aussi les fonctions suivantes: jQuery

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

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

Toute aide serait grande.

Merci.

Answer 1

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

Answer 2

Essayez ceci:

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

Answer 3

Je pense que vous pouvez utiliser une classe nommée « courant » puis retirez/ajouter à l'aide .removeClass() et .addClass().

Answer 4

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

Je recommande d'utiliser un courant de classe au lieu d'un ID

Answer 5

Pas besoin de répéter votre code de navigation pour chaque lien :-)

$("#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; 
});