Question

我想突出显示导航栏中当前页面的链接。麻烦的是我将导航条代码包含在每个页面中，如下所示：

            $.ajax({
            url: "includes/navbar.html",
            success: function (result) {
                $("body").prepend(result);
            }
        });

现在，如果我尝试在此调用后选择要突出显示的链接，则没有任何反应，因为元素尚未在页面中。但我需要在加载时执行此操作，因此$（文档）.on（＆＃39;事件......技巧不会起作用。

现在，我可以将navbar.html代码复制并粘贴到我的所有页面中，或者我应该找到一种方法来编辑函数（结果）中的代码，然后再将其添加到页面正文中。

如果我这样做

var html = $(".nav-link", $.parseHTML(result)).addClass("highlight");
                console.log(html);
                $("body").prepend(result);

我看到课程已添加，但我当然需要＆＃34;申请＆＃34;对变量结果的更改或它不会显示在我的页面中。但我找不到办法做到这一点。

有什么想法吗？我认为我这一切都错了......但是我无法想象我必须在我的页面中复制所有代码，否则我无法突出显示当前打开的页面。< / p>

Answer 1

如果我尝试在此调用后选择要突出显示的链接，则不会发生任何事情，因为元素不在页面中。

解决方案是选择您在success来电中定义的$.ajax回调中的链接，而不是直接在$.ajax来电之后。在.prepend函数中使用success将导航栏插入正文后，稍后在同一函数中的代码可以正常选择导航栏，就好像它一直在页面上一样。

$.ajax({
    url: "includes/navbar.html",
    success: function(result) {
        $("body").prepend(result);
        $(".navbar .nav-link").addClass("highlight");
    }
});

在将AJID调用包含到页面之前，在AJAX调用中编辑HTML代码

1 个答案: