1

我有一个菜单链接到同一页面上的内容，并通过 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")
            });
        });
    });
4

4 回答 4

2

您可以通过添加类来访问单击的元素$(this)并访问它的父li元素。下面是最终代码，您可以在此处找到一个工作示例。parent()current_page_item

$(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:not('#magic-line') a").hover(function() {
        $el = $(this).parent();
        leftPos = $el.position().left;
        newWidth = $el.width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    },function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
    }).click(function() {
         $mainNav.find('li').removeClass('current_page_item');
         $(this).parent().addClass('current_page_item');
         $magicLine
            .data("origLeft", $magicLine.position().left)
            .data("origWidth", $magicLine.width());
    });
});
于 2011-10-22T12:53:49.703 回答
0 
$(function() {
    $("#nav-links a").click(function(){
        $("#nav-links li").removeClass("current_page_item").closest("ul").find("li:last a").addClass("current_page_item");
        });
    });

.find() 只查找死者元素。您正在 .find 上执行 li ，这是您正在搜索的元素的兄弟。

于 2011-10-22T12:49:45.747 回答
0 
$(function() {
    $("#nav-links a").click(function(){
 var B = $(this);
$("#nav-links ul li").removeClass("current_page_item");
B.addClass("current_page_item");
        });
    });

试试这个

于 2011-10-22T12:57:56.480 回答
0
  1. nav-linksis a ulso$("#nav-links ul li")表示女巫中的所有lis都是 sul的后代，nav-links显然没有。你必须使用$("#nav-links li").
  2. 正如其他人提到.find的那样，搜索所有后代，这不是您要寻找的。.closest("ul")之前使用.find

希望能帮助到你。

于 2011-10-22T13:07:57.413 回答