点击nav-link添加active类报错：sidebar.getElementsByClassName不是函数

首先，咱们先搞定控制台的报错：sidebar.getElementsByClassName is not a function。这个问题很明确——你用document.getElementsByClassName("sidebar")获取到的不是单个DOM元素，而是一个HTMLCollection（类数组的元素集合），而.getElementsByClassName()方法只能在单个DOM元素上调用，所以直接用集合去调用这个方法就会报错。

第一步：修复基础的DOM获取错误 #

把获取sidebar的代码改成这样，取集合里的第一个元素（你的页面里应该只有一个sidebar）：

// 方法1：从HTMLCollection中取第一个元素
var sidebar = document.getElementsByClassName("sidebar")[0];
// 更推荐的方法：用querySelector直接获取单个元素
var sidebar = document.querySelector(".sidebar");

另外，你循环里的变量名也写错了——你定义的是navLinks，但循环里用了btns[i]，这也会导致报错，得改成navLinks[i]。

不过这里有个更关键的问题：就算你修复了点击事件，页面跳转后，你通过点击添加的active类会消失，因为页面重新加载了。所以咱们得换个思路：在页面加载完成后，根据当前页面的URL来匹配对应的导航链接，自动给它加上active类，这样刷新或跳转后状态也能保留。

第二步：实现页面跳转后保留active状态的完整代码 #

替换你原来的<script>部分为下面的代码：

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有导航链接
    const navLinks = document.querySelectorAll('.nav-link');
    // 获取当前页面的URL路径
    const currentPath = window.location.pathname;

    // 遍历导航链接，匹配路径并设置active
    navLinks.forEach(link => {
        // 获取链接的href属性值
        const linkPath = link.getAttribute('href');
        // 判断当前路径是否包含链接的路径（适配Django的URL反向解析）
        if (currentPath.includes(linkPath)) {
            // 先移除所有active类
            document.querySelectorAll('.nav-item.active').forEach(item => {
                item.classList.remove('active');
            });
            // 给当前链接的父元素（nav-item）添加active类
            link.closest('.nav-item').classList.add('active');
        }
    });
});

代码解释 #

1. DOMContentLoaded事件：确保DOM完全加载后再执行代码，避免找不到元素的问题。
2. window.location.pathname：获取当前页面的URL路径（比如/dashboard/）。
3. link.getAttribute('href')：获取每个导航链接的目标路径。
4. includes()：判断当前路径是否包含链接的路径，适配Django反向解析生成的URL。
5. closest('.nav-item')：找到当前链接的父元素nav-item，因为你的active类是加在li.nav-item上的，不是直接加在a.nav-link上。

为什么不用点击事件？ #

因为点击导航链接后页面会跳转，跳转后页面重新加载，之前通过点击事件添加的类会被重置。所以直接在页面加载时根据URL匹配是最可靠的方式，同时也能覆盖刷新页面的场景。

内容的提问来源于stack exchange，提问作者GTA.sprx