使用jQuery设置导航栏active类失效问题求助

你遇到的核心问题是：点击语言链接后，jQuery临时修改了DOM的active类，但因为链接触发了页面重定向（Django的HttpResponseRedirect），页面重新加载后，之前的DOM修改会被服务器返回的新页面覆盖，所以状态又回到了初始的ITA激活状态。前端的JS修改是临时的，页面刷新就会重置，必须让页面加载时就知道当前应该激活哪个语言选项。

下面给你两种可行的解决方案，从后端和前端两个角度来处理：

方案一：后端模板渲染时动态设置active类（推荐） #

既然用了Django，最可靠的方式是在服务器渲染模板的时候，根据当前用户的语言会话（session）或cookie，直接给对应的语言链接加上active类。这样页面加载完成后，默认就是正确的激活状态，不需要依赖前端JS。

步骤1：修改视图，传递当前语言到模板 #

在你的首页视图webprojects_home里，从session中获取当前语言（默认设为it），并传递给模板：

def webprojects_home(request):
    # 从session取语言，没有的话默认是意大利语
    current_lang = request.session.get('lang', 'it')
    # 把当前语言变量传给模板
    return render(request, '你的模板文件名.html', {'current_lang': current_lang})

步骤2：修改模板代码，动态添加active类 #

把原来的导航栏代码改成模板语法，判断当前语言是否匹配，匹配就加上active类：

<div class="nav-languages">
  <a class="navbar-brand {% if current_lang == 'it' %}active{% endif %}" id="langStyle" href="/language/it"> ITA </a>
  <a class="navbar-brand {% if current_lang == 'en' %}active{% endif %}" id="langStyle" href="/language/en"> ENG </a>
</div>

这样页面加载时，服务器会自动给当前语言的链接加上active类，完全不需要前端JS来初始化状态。

方案二：前端页面加载时读取状态设置active类 #

如果不想修改后端逻辑，也可以在页面加载完成后，从cookie或者URL路径中读取当前语言，然后给对应的链接加上active类。

步骤1：保留原有的点击事件（即时切换状态） #

你原来的jQuery代码可以保留，这样点击时能即时看到激活状态变化：

$('.nav-languages a').click(function() {
  $('.nav-languages a').removeClass('active');
  $(this).addClass('active');
});

步骤2：添加页面初始化逻辑 #

在document.ready里，读取当前语言并设置active类：

$(document).ready(function() {
    // 方法1：从cookie中读取语言（你的后端已经设置了lang cookie）
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    const currentLang = getCookie('lang') || 'it';

    // 方法2：从URL路径中读取语言（如果当前URL是/language/en/这种格式）
    // const pathParts = window.location.pathname.split('/');
    // const currentLang = pathParts[2] || 'it';

    // 给对应的链接添加active类
    $('.nav-languages a[href="/language/' + currentLang + '"]').addClass('active');
});

这样页面刷新后，JS会自动根据cookie或URL判断当前语言，设置正确的激活状态。

为什么原来的代码无效？ #

简单来说：点击语言链接时，浏览器会向Django后端发送请求，后端返回HttpResponseRedirect让页面跳转。这个过程中，浏览器会加载新的页面，之前通过jQuery修改的DOM状态是临时的，新页面加载后就会被服务器返回的原始HTML覆盖，所以激活状态又回到了初始值。

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