为什么jQuery中添加class功能不生效？点击li标签给a加active类无反应

你当前的代码逻辑存在选择器范围错误：点击任意li后，会先移除所有.nav-item下a标签的active类，随后又给所有.nav-item下的a标签统一添加active类，最终会导致全部导航项都被加上选中样式，无法实现点击对应li单独激活其内部a标签的效果。

替换你的JS逻辑为以下代码即可：

// 确保DOM完全加载后再绑定事件，避免元素未渲染导致绑定失效
$(function() {
  $('.nav-item').click(function() {
    // 清空所有导航项的选中状态
    $(".nav-item a").removeClass("active");
    // 仅给当前点击的li内部的a标签添加选中类
    $(this).find("a").addClass("active");
  });
});

• $(this)指代当前触发点击事件的.nav-item元素，不会命中页面上其他的导航li
• find("a")用来筛选当前li内部的子元素a，精准控制要添加样式的目标
• 外层的$(function() {})是jQuery标准的DOM就绪监听语法，可避免JS加载优先级高于页面元素渲染导致的事件绑定失效问题。

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