点击元素时active-page类未添加 白色背景样式不生效

点击导航切换激活态逻辑失效，核心是对事件对象target属性的理解偏差：

• 事件绑定在类名为pages的外层导航容器上，但用户点击时命中的最内层元素通常是容器内部的<a>标签、<i>图标、<span>文字标签，这些子元素都不携带project-page/about-me-page/contact-page标识类
• 原有逻辑校验的是最内层被点击元素的类名，判断几乎永远不成立，后续增删类的逻辑不会执行
• 原有多分支if判断重复冗余，可大幅简化
• 额外交互问题：导航内<a>标签配置href="#"，点击后会默认跳回页面顶部

原有CSS、HTML结构无需改动，替换JS逻辑即可。事件回调内的this直接指向绑定了点击事件的.pages元素，不需要依赖event.target做判断，简化后代码如下：

$(".list-of-pages .pages").click(function() {
  // 移除所有导航项的激活样式
  $(".list-of-pages .pages").removeClass("active-page");
  // 为当前点击项添加激活样式
  $(this).addClass("active-page");
  // 阻止a标签默认跳转行为
  return false;
});

补充：如果是事件委托场景需要通过event.target获取绑定元素，可使用$(event.target).closest('.pages')向上查找匹配的导航容器，不要直接校验event.target本身的类名。

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