Elimination du code redondant dans un script jQuery

Question

J'ai configuré une page pour charger des données via AJAX, en utilisant la fonction jQuery .load.

Lors du chargement de chaque nouveau fichier en cliquant sur un lien dans une barre d'onglets, j'utilise jQuery pour définir la couleur de l'onglet sélectionné sur jaune. J'ai essayé d'utiliser une fonction .toggleClass pour définir la classe d'un élément li sur actif, afin qu'il soit jaune, mais pas de dés, donc j'ai eu recours à la réinitialisation du CSS chaque fois.

Comment éliminer le code redondant, ou réviser le script?

En tout cas, voici le script jQuery. Toute aide serait la bienvenue!

$(document).ready(function() { 
    $('a#catalog').click(function() { 
     $("#nav ul li a").css("color","white"); 
     $(this).css("color","yellow"); 
     $("#content").load("files/catalog.html"); 
    }); 
    $('a#request').click(function() { 
     $("#nav ul li a").css("color","white"); 
     $(this).css("color","yellow");  
     $("#content").load("files/request.html"); 
    }); 
    $('a#publisher').click(function() { 
     $("#nav ul li a").css("color","white"); 
     $(this).css("color","yellow"); 
     $("#content").load("files/publisher.html"); 
     }); 
    $('a#incoming').click(function() { 
     $("#nav ul li a").css("color","white"); 
     $(this).css("color","yellow"); 
     $("#content").load("files/incoming.html"); 
    }); 
    $('a#finished').click(function() { 
     $("#nav ul li a").css("color","white"); 
     $(this).css("color","yellow"); 
     $("#content").load("files/finished.html"); 
    }); 
    $('a#shipments').click(function() { 
     $("#nav ul li a").css("color","white"); 
     $(this).css("color","yellow"); 
     $("#content").load("files/shipments.html"); 
    }); 
}); 

Et la barre de navigation:

<div class="bar" id="nav"> 
      <ul class="left"> 
       <li><a href="#" id="request">Request Search</a></li> 
       <li><a href="#" id="catalog">Catalog Search</a></li>   
       <li><a href="#" id="publisher">Request from Publisher</a></li> 
       <li><a href="#" id="incoming">Catalog Incoming Files</a></li> 
       <li><a href="#" id="finished">Send Finished Files</a></li>  
       <li><a href="#" id="shipments">Shipments</a></li> 
      </ul> 
     </div> 

Et enfin, mais non le moindre, le CSS:

.bar { margin: 5px 0; position: relative; height: 20px; background-color: #515e6c; } 
.bar a { color: #fff; } 
.bar ul li a:hover { color: yellow; } 
/* .bar ul li.active { color: yellow; } */ 
ul { margin: .3em 0; } 
ul li { display: inline; padding: 0 5px; border-right: 1px solid #fff; } 
ul li:last-child { border-right: none; } 

Merci à l'avance!

Answer 1

Cela devrait le faire:

$(document).ready(function() { 
    var $links = $('#nav ul li a'); 
    $links.click(function() { 
     $links.css("color","white"); 
     $(this).css("color","yellow"); 
     $("#content").load("files/" + $(this).attr('id') + ".html");  
    }); 
}); 

En ce qui concerne votre règle sélectionnée, changer à ceci:

.bar ul li a.active { color: yellow; } 

Et puis vous pouvez modifier les deux premières lignes de la fonction de clic à cette :

$links.removeClass('active'); 
$(this).addClass('active'); 

le style a été appliqué à l'<li> se INSTE annonce du <a>.