jQuery加载导航栏后无法修改指定标签样式的问题求助

核心原因 #

$("#NavBar").load()是异步操作——它会在后台发起请求加载navbar.html，但不会等待请求完成就直接执行后面的$("#admin_tab").css()代码。这时候#admin_tab元素还没被插入到当前页面的DOM中，jQuery找不到目标元素，样式修改自然不会生效。

而你在控制台执行命令时，导航栏已经完全加载完成，#admin_tab已经存在于DOM里，所以命令能正常生效。

解决方案 #

把样式修改的逻辑放到load()方法的回调函数中，这个回调会在外部资源（navbar.html）加载完成并插入DOM后才执行：

$(function(){
    $("#NavBar").load("/navbar.html", function() {
        // 导航栏加载完成后再修改样式
        $("#admin_tab").css({'background-color':"#FFF"});
    });
});

补充说明 #

你尝试的$.ready()或onload之所以无效，是因为：

• $.ready()仅等待当前页面的DOM结构加载完成，不会等待异步加载的外部HTML内容；
• window.onload等待页面所有资源（图片、脚本等）加载完成，但无法精准对应导航栏加载完成的时机，可靠性不如load()的回调函数。

内容的提问来源于stack exchange，提问作者Evan