求助：为<a>标签添加点击事件及当前标签active属性的实现问题

看起来你是想实现左侧导航栏的点击高亮切换效果对吧？我来帮你梳理下可行的实现方式，分原生JS和jQuery两种场景来说：

原生JavaScript实现 #

先补全你的HTML结构（假设剩余标签格式一致）：

<div class="leftFocus">
  <a class="leftFocusItem active" href="/" >
    <i class="fa fa-fire mr5 text-red fa-fw"></i>今日动态
  </a>
  <a class="leftFocusItem" href="/recommend">
    <i class="fa fa-user-plus mr5 text-violet fa-fw"></i>您的关注
  </a>
  <a class="leftFocusItem" href="/activity" >
    <i class="fa fa-calendar mr5 text-blue fa-fw"></i>活动中心
  </a>
</div>

核心逻辑是点击时先移除所有同类标签的active类，再给当前点击的标签加上，如果是单页应用不需要跳转页面，还可以阻止默认跳转行为：

// 获取所有导航项
const navItems = document.querySelectorAll('.leftFocus .leftFocusItem');

// 给每个导航项绑定点击事件
navItems.forEach(item => {
  item.addEventListener('click', function(e) {
    // 1. 移除所有导航项的active类
    navItems.forEach(nav => nav.classList.remove('active'));
    // 2. 给当前点击的项添加active类
    this.classList.add('active');
    
    // 单页应用需要阻止跳转的话，取消下面的注释
    // e.preventDefault();
  });
});

jQuery实现（如果项目引入了jQuery） #

如果你的项目用了jQuery，代码会更简洁：

$('.leftFocus .leftFocusItem').on('click', function() {
  // 给当前项加active，同时移除兄弟项的active
  $(this).addClass('active').siblings().removeClass('active');
  
  // 需要阻止跳转的话加这句
  // return false;
});

你之前没生效的可能原因 #

• 没移除其他标签的active类：只给当前标签加，但旧的active类还存在，导致样式无变化
• 事件绑定时机不对：如果JS代码写在HTML结构之前，DOM还没加载完成就绑定事件，会找不到元素。解决办法是把JS放在</body>标签前，或者用DOM加载完成事件包裹：

  document.addEventListener('DOMContentLoaded', function() {
    // 上面的JS逻辑放在这里
  });
  

• 样式优先级问题：检查CSS中.active类的优先级是否被其他样式覆盖，建议用更明确的选择器：

  .leftFocus .leftFocusItem.active {
    color: #ff4444;
    background-color: #f8f8f8;
    /* 你的高亮样式 */
  }
  

这样应该就能实现你想要的点击切换高亮效果啦～

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