JavaScript添加类不适用于Django模板

我想用这个：

var btns = document.getElementsByClassName("active-btn");

  // Loop through the buttons and add the active class to the current/clicked button
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
      var current = document.getElementsByClassName("active");

      // If there's no active class
      if (current.length > 0) {
        current[0].className = current[0].className.replace(" active", "");
      }
      console.log(this.className)
      this.className += " active";

    });
  }

var btns=document.getElementsByClassName（“活动btn”）；
//循环浏览按钮并将活动类添加到当前/单击的按钮
对于（变量i=0；i0）{
当前[0]。className=current[0]。className.replace（“活动的”）；
}
console.log（this.className）
this.className+=“活动”；
});
}

在my base.html中，有一个自动切换此活动类的导航栏。但是这不起作用，元素得到了类，但是页面重新加载，类又离开了，我想这是因为我在Django模板中使用了它。我希望你能帮助我

导航栏如下所示：

<nav class="top-nav">
          <ul class="top-nav-list">
            <li class="nav-item menu-icon drop-btn"><div class="icon menu-btn" id="menu-btn"><i class="active-btn material-icons">menu</i></div></li>
            {% if user.is_authenticated %}
            <div class="menu-items">
            <li class="nav-item menu-item"><a class="active-btn dropdown-btn" onclick="logoutDropDown()">{{user}}</a></li>
            <div class="dropdowns" id="dropdown-item">
            <li class="nav-item menu-item2 dropdown-item" ><a href="/account/profile/edit">Bearbeiten</a></li>
            <li class="nav-item menu-item2 dropdown-item" ><a href="/account/logout">Abmelden</a></li>
            </div>
            {% else %}  
            <li class="nav-item menu-item">
              <button onclick="openLoginPopUp()" class="active-btn">Login</button>
            </li>
            {% endif %}
            <li class="nav-item menu-item" id="menu-item"><a class="active-btn" href="/ingredients/my">Meine Zutaten</a></li>
            <li class="nav-item menu-item"><a class="active-btn" href="/recipes/my">Meine Rezepte</a></li>
            <li class="nav-item  menu-item">
              <a class="active-btn active" href="/recipes/all">Alle Rezepte</a>
            </li>
          </div>
          <li class="nav-item menu-item logo"><a><img src="{% static 'logo/logo.svg' %}" alt="SVG mit img Tag laden"></a></li>
          </ul>
        </nav>

菜单
{%if user.u经过身份验证%}


{%else%}

登录

{%endif%}