Eliminieren von redundantem Code in einem jQuery-Skript

Question

Ich habe eine Seite eingerichtet, um Daten über AJAX unter Verwendung der Funktion jQuery .load zu laden.

Nachdem ich jede neue Datei geladen habe, indem ich auf einen Link in einer Tableiste geklickt habe, verwende ich jQuery, um die Farbe der ausgewählten Registerkarte auf Gelb zu setzen. Ich habe versucht, eine .toggleClass Funktion zu verwenden, um die Klasse eines li Elements zu aktivieren, so dass es gelb wäre, aber keine Würfel, so habe ich Zuflucht genommen, um das CSS jedes Mal neu zu setzen.

Wie kann der redundante Code beseitigt oder das Skript überholt werden?

In jedem Fall ist hier das jQuery-Skript. Jede Hilfe wäre willkommen!

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

und die Navigationsleiste:

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

Und last, but not least, die 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; } 

Vielen Dank im Voraus!

Answer 1

Dies sollte es tun:

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

Soweit Ihre ausgewählten Regel, es so ändern:

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

Und dann können Sie die ersten beiden Zeilen der Klick-Funktion, um diese Änderung :

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

der Stil ursprünglich die <li> angewandt wurde selbst Inste Anzeige der <a>.