如何在onclick事件中为SIDENAV添加/移除active类？

嘿，我来帮你搞定侧边导航的active类切换问题！结合你给出的HTML结构，我给你分享两种常用的实现方式，不管你用原生JavaScript还是jQuery都能轻松搞定～

方法一：原生JavaScript实现 #

这种方法不需要依赖任何库，纯原生代码就能实现，兼容性也很好。

核心思路： #

• 选中所有带有.nav-link类的导航元素
• 给每个元素绑定点击事件
• 点击时，先移除所有导航元素的active类，避免多个元素同时高亮
• 再给当前点击的元素添加active类
• （可选）如果需要给可折叠导航的标签也加上active状态，单独处理它的点击事件

完整示例代码 #

首先是整理后的HTML结构（和你提供的一致，只是格式更清晰）：

<nav class="sidenav">
  <section class="sidenav-content">
    <a href="#" class="nav-link active"> Nav Element 1 </a>
    <a href="#" class="nav-link"> Nav Element 2 </a>
    <section class="nav-group collapsible">
      <input id="tabexample1" type="checkbox">
      <label for="tabexample1">Collapsible Nav Element</label>
      <ul class="nav-list">
        <li><a href="#" class="nav-link">Sub Nav Element 1</a></li>
        <li><a href="#" class="nav-link">Sub Nav Element 2</a></li>
      </ul>
    </section>
  </section>
</nav>

然后是JavaScript代码：

// 获取所有导航链接元素
const navLinks = document.querySelectorAll('.nav-link');

// 给每个链接绑定点击事件
navLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止默认跳转行为（如果你的href是#或者不需要跳转的话，可根据需求删除）
    e.preventDefault();
    
    // 移除所有导航链接的active类
    navLinks.forEach(item => item.classList.remove('active'));
    
    // 给当前点击的链接添加active类
    this.classList.add('active');
  });
});

// （可选）处理可折叠导航标签的active状态
const collapsibleLabels = document.querySelectorAll('.nav-group.collapsible label');
collapsibleLabels.forEach(label => {
  label.addEventListener('click', function() {
    // 切换标签的active类（点击时添加/移除）
    this.classList.toggle('active');
    
    // 如果需要点击当前标签时关闭其他可折叠组，取消下面注释
    // collapsibleLabels.forEach(l => l !== this && l.classList.remove('active'));
  });
});

方法二：jQuery实现（如果项目已引入jQuery） #

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

$(document).ready(function() {
  // 导航链接的点击事件
  $('.nav-link').click(function(e) {
    e.preventDefault();
    // 移除所有链接的active类，给当前点击的添加
    $('.nav-link').removeClass('active');
    $(this).addClass('active');
  });
  
  // （可选）可折叠标签的active切换
  $('.nav-group.collapsible label').click(function() {
    $(this).toggleClass('active');
    // 关闭其他可折叠组：$(this).parent().siblings().find('label').removeClass('active');
  });
});

额外提示：别忘了给active类加样式 #

要让active状态看得见，记得在CSS里给.active类设置样式，比如：

.nav-link.active {
  color: #007bff;
  font-weight: 600;
  background-color: rgba(0, 123, 255, 0.1);
  border-left: 3px solid #007bff;
}

/* 可选：给可折叠标签的active状态加样式 */
.nav-group.collapsible label.active {
  color: #007bff;
  font-weight: 600;
}

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