单击导航addClass/removeClass

我有一个菜单，它链接到同一页面上的内容，并通过jQuery淡入淡出div，工作非常完美。

导航中的第一个链接附加了一个类(current_page_item(，我希望在单击导航中的任何其他链接时，删除该类并将其添加到单击的链接中。

到目前为止，我已经尝试过这样的东西：

$(function() {
    $("#nav-links a").click(function(){
        $("#nav-links ul li").removeClass("current_page_item").find("li:last a").addClass("current_page_item");
        });
    });

这不起作用。

我是javascript的新手，如果有任何帮助，我将不胜感激。

谢谢！

编辑：

这是导航的HTML：

            <div id="nav-wrap">
                <ul class="group" id="nav-links">
                    <li class="current_page_item"><a href="#recent" class="linkclass recent">RECENT</a></li>
                    <li><a href="#work" class="linkclass work">WORK</a></li>
                    <li><a href="#who" class="linkclass who">WHO</a></li>
                    <li><a href="#services" class="linkclass services">SERVICES</a></li>
                    <li><a href="#contact" class="linkclass contact">CONTACT</a></li>
                </ul>
            </div>

编辑2:

使用下面的答案似乎仍然没有达到我想要的目的。也许是因为我使用的jQuery插件(魔术线(。链接

所以基本上我希望"线"停留在点击的下方。如果我在正确的位置加载一个带有"current_page_item"的新页面，这会起作用，但由于我正在淡出DIV，我无法做到这一点。

该行返回到具有"current_page_item"类的li项。也许可以修改此代码以将类添加到单击的元素中？

这是代码。

    $(function() {
        var $el, leftPos, newWidth,
            $mainNav = $("#nav-links");
        $mainNav.append("<li id='magic-line'></li>");
        var $magicLine = $("#magic-line");
        $magicLine
            .width($(".current_page_item").width())
            .css("left", $(".current_page_item a").position().left)
            .data("origLeft", $magicLine.position().left)
            .data("origWidth", $magicLine.width());
        $("#nav-links li a").hover(function() {
            $el = $(this);
            leftPos = $el.position().left;
            newWidth = $el.parent().width();
            $magicLine.stop().animate({
                left: leftPos,
                width: newWidth
            });
        }, function() {
            $magicLine.stop().animate({
                left: $magicLine.data("origLeft"),
                width: $magicLine.data("origWidth")
            });
        });
    });