如何在jQuery动态加载的HTML导航中为链接添加selected类

代码失效的核心原因有两点：

• 加类的写法存在语法逻辑错误：你混用原生JS和jQuery写法，把原生DOM加类操作的返回值（undefined）传入jQuery构造函数，属于无效写法，且原生classListAPI在低版本浏览器存在兼容问题
• 选中项逻辑硬编码在加载回调中，每个页面都要修改回调内容，没有彻底降低维护成本

通用低维护版本（推荐） #

把导航加载、选中态设置的逻辑抽成所有页面共用的固定逻辑，每个页面只需要单独配置当前页对应的导航项ID即可，不需要重复写加载逻辑。

1. 先写公共逻辑，放到所有页面都会引入的公共JS文件中即可：

// 读取当前页面提前配置的导航项ID，没有配置则不设置选中态
const currentNavId = window.currentNavId || '';

$(function() {
  $('#nav-placeholder').load('/nav.html', () => {
    if (!currentNavId) return;
    // 导航插入完成后，给对应ID的元素加选中类
    $('#' + currentNavId).addClass('selected');
  })
})

2. 每个页面只需要在引入jQuery和公共JS之前，声明当前页对应的导航ID即可，比如roster页面的配置：

<script>
// 配置当前页面对应的导航项ID，其他页面只需要改这个值
window.currentNavId = 'roster';
</script>
<!-- 后续引入jQuery、公共导航逻辑脚本即可 -->

后续新增页面时，只需要加一行window.currentNavId = '对应导航ID'的配置，再放一个id为nav-placeholder的空div，不需要修改任何导航相关的公共代码。

临时修复你现有代码的版本 #

如果暂时不想抽公共逻辑，直接把回调里的错误写法替换成标准jQuery写法即可生效，修改后的脚本如下：

$(function() {
  $("#nav-placeholder").load("/nav.html", function() {
    // 删掉原来的错误写法，直接用jQuery提供的addClass方法
    $("#roster").addClass("selected");
  });
});

• 确保nav.html中各导航链接的ID和页面配置的ID完全一致，注意大小写、拼写不要出错
• 不要直接用file协议双击打开HTML文件测试，load方法在本地文件协议下会因跨域限制失效，需要放到本地Web服务环境下测试（比如Nginx、本地开发服务、编辑器的静态服务插件）
• 同一套DOM操作逻辑尽量统一用jQuery或者原生JS写法，不要混写避免出现无意义的语法错误

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