点击A标签后为其添加active类的实现问题

你的代码核心问题是调用函数时没有传递当前点击的元素对象，导致函数内的e为undefined，无法执行classList.add('active')操作。以下是两种可行的修复方案：

方案一：修改现有代码（保留onclick绑定） #

1. 更新HTML的onclick属性 #

把onclick="showNotConfirmedDiv()"改为onclick="showNotConfirmedDiv(this)"，直接传递当前点击的<a>元素：

<li class="nav-item">
    <a class="nav-link" href="#" onclick="showNotConfirmedDiv(this)">
        <span data-feather="file-text"></span>
        Not Confirmed<span class="badge updateBadge">1</span>
        <!-- TODO ONLY SHOW BADGE IF THERE IS A NUMBER!!!!! -->
    </a>
</li>

2. 修正JavaScript函数 #

在函数内先移除其他导航链接的active类（避免多个标签同时高亮），再给当前元素添加类：

function showNotConfirmedDiv(el) {
    $('#notConfirmedDiv').show();
    $('#duplicantClientFilesDiv').hide();
    
    // 移除所有.nav-link的active类
    document.querySelectorAll('.nav-link').forEach(item => {
        item.classList.remove('active');
    });
    
    // 给当前点击的元素添加active类
    el.classList.add('active');
}

方案二：使用jQuery事件绑定（推荐，结构与行为分离） #

这种方式不需要在HTML里写onclick，更符合前端开发规范：

1. 简化HTML #

<li class="nav-item">
    <a class="nav-link" href="#">
        <span data-feather="file-text"></span>
        Not Confirmed<span class="badge updateBadge">1</span>
        <!-- TODO ONLY SHOW BADGE IF THERE IS A NUMBER!!!!! -->
    </a>
</li>

2. 编写jQuery事件处理代码 #

// 页面加载完成后绑定事件
$(function() {
    $('.nav-item .nav-link').click(function() {
        $('#notConfirmedDiv').show();
        $('#duplicantClientFilesDiv').hide();
        
        // 移除所有导航链接的active类
        $('.nav-link').removeClass('active');
        // 给当前点击的元素添加active类
        $(this).addClass('active');
        
        // 阻止#锚点的默认跳转行为
        return false;
    });
});

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