如何在页面刷新后用jQuery保持当前Tab（含动态Tab）的激活状态

这个问题的核心原因是：当前的激活状态只靠客户端JS维护，页面刷新后JS的临时状态会完全丢失，所以每次刷新都会回到默认的第一个Tab激活状态。要彻底解决这个问题，我们需要结合服务端渲染时的URL判断来主动给对应的Tab加上激活类，同时优化客户端JS的逻辑。

步骤1：服务端层面设置初始激活状态 #

因为你的页面是Django模板渲染的，我们可以利用Django的request对象判断当前访问的URL，给匹配的Tab自动加上active_scroll类：

静态按钮（Browse All Your Guns） #

修改静态按钮的模板代码，判断当前页面是否是browse_gun路由，如果是就添加激活类：

<li>
  <a href="{% url 'gun:browse_gun' %}" 
     class="btn btn-br_all_gun {% if request.resolver_match.url_name == 'browse_gun' %}active_scroll{% endif %}">
    Browse All Your Guns
  </a>
</li>

动态生成的枪Tab #

假设每个枪的详情页路由是gun:gun_detail（需要传入枪的ID作为参数），修改动态Tab的模板代码，判断当前URL是否匹配该枪的详情页，如果是就添加激活类：

{% for gunName in gunModelUserTieIn %}
<li>
  <a href="{% url 'gun:gun_detail' gunName.gun_model.id %}" 
     {% if request.resolver_match.url_name == 'gun_detail' and request.resolver_match.kwargs.pk == gunName.gun_model.id %}
     class="active_scroll"
     {% endif %}>
    {{ gunName.gun_model.model_name }}
  </a>
</li>
{% endfor %}

注意：如果你的枪详情页URL参数不是pk（比如是gun_id），记得把request.resolver_match.kwargs.pk改成对应的参数名。

步骤2：优化客户端JS逻辑 #

原来的JS存在事件重复绑定的问题（嵌套的点击事件会每次点击都绑定一次），我们可以调整逻辑，保留客户端的即时激活反馈，让用户点击Tab时立刻看到状态变化，再等待页面刷新：

$(document).ready(function(){
  // 处理所有Tab的点击事件
  $('.scroll_nav li a').click(function(){
    // 先移除所有激活状态
    $('li a').removeClass("active_scroll");
    // 给当前点击的Tab添加激活状态
    $(this).addClass('active_scroll');
  });

  // 单独处理静态按钮的点击（可选，服务端已保证刷新后的状态，这里仅做即时反馈）
  $('.btn-br_all_gun').click(function(){
    $('li a').removeClass("active_scroll");
    $(this).addClass('active_scroll');
  });
});

为什么这个方案有效？ #

• 服务端渲染时直接根据当前URL判断并添加激活类，页面刷新后初始状态就是正确的，完全不依赖客户端JS的临时状态。
• 客户端JS负责点击时的即时视觉反馈，提升用户体验，而页面刷新后的最终状态由服务端牢牢保证。

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