Question

我将导航栏放在一个单独的文件中，以避免重复此HTML代码。所以，我用

包含我的导航栏

$("#includeNavbar").load("/navbar.html");

但我想编辑导航栏以放置一个活动标签（bootstrap）。我想做类似的事情：

$(function() {
            $("#includeNavbar").load("/navbar.html");
            $("#includeNavbar>li").each(function(){
                if($(this).text() == "CV"){
                    $(this).addClass("active");
                }
            });
        });

但它不起作用......有些人请帮助......

Answer 1

您必须在完全回调中执行此操作，因为它是异步加载的。您可以使用过滤器..

$("#includeNavbar").load("/navbar.html", function() {
    $(this).find('li').filter(function() {
        return $(this).text() == "CV"
    }).addClass("active");
});

Answer 2

这是代码，试一试：

$("#includeNavbar").load("/navbar.html", function(){
     $("#includeNavbar li").each(function(){
         if($(this).text() == "CV"){
            $(this).addClass("active");
         }
     });
});

那就是它。

Answer 3

要与文件进行交互，您必须等到它首先加载。 JQuery.load函数有一个第二个参数，它是一个回调函数。以下内容利用该回调，并应在页面完全加载后触发：

$(function() {
    $("#includeNavbar").load("/navbar.html", function() {
        $("#includeNavbar>li").each(function(){
            if($(this).text() == "CV"){
                $(this).addClass("active");
            }
        });
    });
});

Answer 4

将代码放入回调中：

$("#includeNavbar").load("/navbar.html",function(){
    $("#includeNavbar>li").each(function(){
        if($(this).text() == "CV"){
            $(this).addClass("active");
        }
    });
});

这将在元素加载后调用

与使用jQuery加载的文件进行交互

4 个答案: