页面刷新时如何保留导航Tab的active状态？

你的问题出在点击事件的绑定逻辑上：之前把点击事件绑在了父容器div.nav上，每次点击时通过$(this).find('button')获取的是父容器下第一个按钮的data-bs-target值，所以不管点哪个Tab，存到sessionStorage里的都是固定的第一个Tab的目标值，自然无法正确记录选中状态。

修正步骤及代码 #

1. 修正HTML模板的变量一致性（可选但重要）

你模板里循环的是region变量，但使用了department.id和department.department_name，这会导致生成的Tab目标和面板ID不匹配，先修正这个笔误：

<nav>
   <div class="nav nav-tabs justify-content-center" role="tablist">
{% for region in regions %} 
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#region-{{ region.id }}" type="button" role="tab" aria-controls="region-{{ region.id }}">{{ region.department_name }}</button>
{% endfor %}
   </div>
</nav>
<div class="tab-content">
{% for region in regions %} 
    <div class="tab-pane fade" id="region-{{ region.id }}" role="tabpanel"></div>
{% endfor %}
</div>

2. 修正JavaScript逻辑

把点击事件直接绑定到每个Tab按钮上，确保能获取到当前点击按钮的data-bs-target值，同时在页面加载时正确恢复激活状态：

$(function() {
    // 页面加载时恢复上次选中的Tab
    const activeTabTarget = sessionStorage.getItem('nav-active-tab');
    if (activeTabTarget) {
        // 调用Bootstrap的tab方法激活对应Tab
        $('.nav-link[data-bs-target="' + activeTabTarget + '"]').tab('show');
    } else {
        // 无存储值时默认激活第一个Tab（可选，可根据需求删除）
        $('.nav-link:first').tab('show');
    }

    // 监听每个Tab按钮的点击事件，保存当前选中的目标值
    $('.nav-link').on('click', function() {
        const currentTarget = $(this).attr('data-bs-target');
        sessionStorage.setItem('nav-active-tab', currentTarget);
    });
});

关键说明 #

• Bootstrap的tab('show')方法会自动处理：给选中的Tab按钮添加active类，同时给对应的.tab-pane面板添加active show类，不需要手动修改类名。
• 直接绑定.nav-link的点击事件，$(this)指向当前点击的按钮，能准确获取到该Tab对应的目标面板ID，解决了之前固定值的问题。
• 使用sessionStorage会在浏览器会话结束后清除记录，如果需要跨会话保存，可以换成localStorage。

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