使用JavaScript移除当前页面导航链接，为何仅偶尔生效？

核心问题是异步加载的时序不匹配：jQuery的load()和$.get()是异步操作，不会阻塞后续代码执行。你的处理脚本经常在导航或footer还没完全加载到DOM里的时候就执行了，这时候自然拿不到目标元素（返回null），导致逻辑执行失败。

以下是具体的解决思路和代码示例：

1. 把处理逻辑放到异步加载的回调里 #

不管用load()还是$.get()，必须将修改菜单项的代码放在它们的成功回调函数内，确保DOM元素已经存在再进行操作：

// 加载导航并在完成后处理
$('#nav-container').load('/nav.html', function() {
  handleCurrentPage('nav-home');
});

// 加载footer并在完成后处理
$('#footer-container').load('/footer.html', function() {
  handleCurrentPage('footer-home');
});

// 通用处理函数
function handleCurrentPage(targetId) {
  const $item = $('#' + targetId);
  if ($item.length) {
    $item.addClass('current').removeAttr('href');
  }
}

2. 统一管理多个异步加载的完成状态 #

如果需要等导航和footer都加载完成后再统一处理，可以用$.when()合并异步操作：

// 发起两个异步加载请求
const navLoad = $('#nav-container').load('/nav.html');
const footerLoad = $('#footer-container').load('/footer.html');

// 等两者都完成后执行处理逻辑
$.when(navLoad, footerLoad).done(function() {
  handleCurrentPage('nav-home');
  handleCurrentPage('footer-home');
});

3. 直接在回调中读取状态参数 #

你之前用data-currentPage传递元素ID，建议直接在加载完成的回调里读取这个属性，确保获取的是已加载DOM元素上的最新值：

$('#nav-container').load('/nav.html', function() {
  const currentId = $(this).data('currentPage');
  handleCurrentPage(currentId);
});

4. 加日志调试时序问题 #

可以在关键位置添加日志，确认异步操作的完成顺序和元素是否存在，方便排查问题：

$('#nav-container').load('/nav.html', function() {
  const targetId = $(this).data('currentPage');
  console.log('导航加载完成，目标元素存在：', $('#' + targetId).length > 0);
  handleCurrentPage(targetId);
});

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