Устранение избыточного кода в скрипте jQuery

Question

Я настроил страницу для загрузки данных через AJAX, используя функцию jQuery .load.

После загрузки каждого нового файла, щелкнув ссылку на панели вкладок, я использую jQuery, чтобы установить желтый цвет выбранной вкладки. Я попытался с помощью функции .toggleClass установить класс активного элемента li, чтобы он был желтым, но без кубиков, поэтому я прибегал к сбросу CSS каждый раз.

Как устранить избыточный код или пересмотреть скрипт?

В любом случае, вот скрипт jQuery. Любая помощь будет приветствоваться!

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

И панель навигации:

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

И, наконец, 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; }

Заранее спасибо!

Answer 1

Это должно сделать это:

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

Что касается выбранного вами правила, измените его на:

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

И затем вы можете изменить первые две строки функции щелчка следующим образом:

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

Стиль изначально применялся к самому <li> вместо <a>.