如何为导航栏添加JavaScript/JQuery实现点击切换active类

原生JavaScript实现 #

直接给所有导航链接绑定点击事件，点击时先清除所有链接的active类，再给当前点击的链接加上该类，同时阻止空链接的默认跳转行为：

// 获取所有导航链接元素
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');
  });
});

jQuery实现 #

如果项目里已经引入了jQuery，可以用更简洁的写法，利用jQuery的选择器和DOM操作方法快速实现：

$(document).ready(function() {
  $('.nav-link').click(function(e) {
    // 阻止默认跳转
    e.preventDefault();
    // 移除所有兄弟元素的active类，当前元素添加active类
    $('.nav-link').removeClass('active');
    $(this).addClass('active');
    // 或者更简洁的链式写法：
    // $(this).addClass('active').siblings('.nav-link').removeClass('active');
  });
});

如果你的导航链接是动态生成的（比如通过AJAX加载），jQuery方案建议改用事件委托，确保新添加的元素也能触发事件：

$(document).ready(function() {
  $('ul').on('click', '.nav-link', function(e) {
    e.preventDefault();
    $('.nav-link').removeClass('active');
    $(this).addClass('active');
  });
});

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