侧边栏导航点击时类未移除且链接失效问题排查

原侧边栏HTML结构 #

<nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
    <div class="sb-sidenav-menu">
        <div class="nav" id="mianav">
            <div class="sb-sidenav-menu-heading">Core</div>
            <a class="nav-link" href="{% url 'dashboard' %}">
                <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
                Dashboard
            </a>
            <a class="nav-link" href="{% url 'agenda' %}">
                <div class="sb-nav-link-icon"><i class="fas fa-calendar"></i></div>
                Agenda
            </a>
            <a class="nav-link" href="#">
                <div class="sb-nav-link-icon"><i class="fas fa-fw fa-database"></i></div>
                CRUD App
            </a>
            <a class="nav-link" href="#">
                <div class="sb-nav-link-icon"><i class="fas fa-upload"></i></div>
                File Upload
            </a>
            <a class="nav-link" href="#">
                <div class="sb-nav-link-icon"><i class="fas fa-fw fa-bullseye"></i></div>
                Ajax Crud
            </a>
        </div>
    </div>
</nav>

原JavaScript代码 #

$('#mianav a').click(function(e){
                e.preventDefault();
                $(this).addClass('miaactive').parent().siblings().find('a').removeClass('miaactive');
                localStorage.setItem('target', $(this).data("target"));
            });
            var target = localStorage.getItem('target');
            !target || $('a[data-target="' + target + '"]').addClass('miaactive').parent().siblings().find('a').removeClass('miaactive'); 

问题根源解析 #

1. 链接无法正常跳转 #

代码中全局使用e.preventDefault()，这个方法会强制阻止所有链接的默认跳转行为，不管链接的href是有效URL还是#，点击后都不会触发跳转。

2. 其他链接的miaactive类未被移除 #

• 选择器逻辑错误：$(this).parent().siblings().find('a') —— 你的<a>元素直接属于#mianav容器，$(this).parent()就是#mianav，它的同级元素只有<div class="sb-sidenav-menu-heading">，这个元素里没有<a>标签，自然无法移除其他导航链接的激活类。
• 依赖的属性不存在：HTML中所有<a>都没有data-target属性，$(this).data("target")获取到的是undefined，存入localStorage后，页面加载时的激活逻辑根本无法匹配到任何元素。

修复方案 #

第一步：补充HTML的标识属性 #

给所有导航<a>添加data-target属性，作为激活状态的标识：

<a class="nav-link" href="{% url 'dashboard' %}" data-target="dashboard">
    <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
    Dashboard
</a>
<a class="nav-link" href="{% url 'agenda' %}" data-target="agenda">
    <div class="sb-nav-link-icon"><i class="fas fa-calendar"></i></div>
    Agenda
</a>
<a class="nav-link" href="#" data-target="crud-app">
    <div class="sb-nav-link-icon"><i class="fas fa-fw fa-database"></i></div>
    CRUD App
</a>
<!-- 其余链接同理补充data-target -->

第二步：修改JavaScript代码 #

// 点击事件处理
$('#mianav a').click(function(e){
    // 仅对href为#的链接阻止跳转，正常带路径的链接允许跳转
    if ($(this).attr('href') === '#') {
        e.preventDefault();
    }
    
    // 先移除所有导航链接的激活类，再给当前点击的添加
    $('#mianav a').removeClass('miaactive');
    $(this).addClass('miaactive');
    
    // 仅当data-target存在时，才存入localStorage
    const target = $(this).data("target");
    if (target) {
        localStorage.setItem('target', target);
    }
});

// 页面加载时恢复之前保存的激活状态
const savedTarget = localStorage.getItem('target');
if (savedTarget) {
    $('#mianav a').removeClass('miaactive');
    $('a[data-target="' + savedTarget + '"]').addClass('miaactive');
}

关键修改点 #

• 取消全局阻止跳转，只对无实际路径的#链接禁用跳转，保证正常URL链接可以正常跳转。
• 简化激活类的操作逻辑：直接选中所有导航链接移除激活类，再给当前点击的添加，避免选择器层级错误。
• 增加判断逻辑，避免存入无效的undefined值到localStorage。
• 页面加载时的激活逻辑保持和点击事件一致，先清空所有激活类再设置目标类，确保状态唯一。

内容的提问来源于stack exchange，提问作者Amedeo De Longis