Javascript 单击新页面而不刷新时更改活动类

我正在使用Jinja模板实现一个flask应用程序，并且我试图一次向我的一个导航锚元素添加一个活动类，基于用户当前所在的URL。但是，这仅在加载主页或刷新任何页面时有效，而在单击其他页面时无效

我尝试了许多使用普通JavaScript、jQuery和jinja模板的方法来解决这个问题，但所有这些方法都产生了我提到的相同结果

这是我的application.py文件

@app.route("/")
def index():
   return render_template("index.html", page="")


@app.route("/AboutUs")
   def about():
   return render_template("about.html")


@app.route("/Services")
def services():
   return render_template("services.html")

以下是我的布局html模板中导航菜单的代码：

<div class="navbar-nav mx-auto" id="menu">
  <a {% if request.path == '/' %}class="active nav-link"{% endif %}
  class="nav-link" href="/">Home</a>
  <a {% if request.path == '/AboutUs' %}class="active nav-link"{% endif %}
  class="nav-link" href="/AboutUs">About Us</a>
  <a {% if request.path == '/Services' %}class="active nav-link"{% endif %}
  class="nav-link" href="/Services">Our Services</a>
</div>

---

有人能告诉我问题出在哪里吗？

在比较JavaScript中的falsy时，如果有特殊字符，则返回总是false。我认为“/”就是这些字符之一。您可以对两个字符串执行“string”.trim（）来修复此问题，或者在steafdof==

中使用===在我的项目中，我使用了下面的代码使其工作。您只需检查给定的

路径是否包含在
请求中。路径是否取决于此添加活动。i、 e:

  <div class="navbar-nav mx-auto" id="menu">
      <a {% if request.path == '/' %}
            class="active nav-link"
         {% else %}
            class="nav-link"
         {% endif %}
        href="/">Home</a>
      <a {% if '/AboutUs' in request.path %}
          class="active nav-link" 
        {% else %}
         class="nav-link"
        {% endif %} 
        href="/AboutUs">About Us</a>
      <a {% if '/Services' in request.path  %}
         class="active nav-link" 
        {% else %}
      class="nav-link"
        {% endif %} href="/Services">Our Services</a>
    </div>


我想我不明白你的意思，你能再解释一下吗？对不起，我是一名新程序员：（我已经尝试过了，但仍然得到了相同的结果-活动链接只有在我刷新页面时才会更改，但单击链接时不会更改。我尝试过删除swup过渡，现在它可以工作了！知道如何在保持过渡的同时使其工作吗？我使用的过渡是淡入淡出过渡，具有更改不透明度和从左到右的转换。）好的。我不确定。你也可以问另一个问题：）。