Javascript 消除jQuery脚本中的冗余代码

我已经设置了一个页面，利用jQuery

.load

函数通过AJAX加载数据

通过单击选项卡栏上的链接加载每个新文件时，我使用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>

提前谢谢

这应该可以做到：

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

该样式最初应用于

本身，而不是

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