在不刷新的情况下单击新页面时更改活动 class

Question

我正在使用 Jinja 模板实现一个 Flask 应用程序，并且我正在尝试一次向我的一个导航锚元素添加一个活动的 class，基于此 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>

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

Answer 1

在JavaScript中比较falsy时如果returns有特殊字符则总是false。我认为“/”是这些字符之一。您可以在两个字符串上执行 "string".trim() 来解决此问题，或者在 steafdof ==

中使用 ===

Answer 2

在我的项目中，我使用以下代码使其工作。您可以根据此 add active 检查给定的 path 是否在 request.path 中。即：

  <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>

在不刷新的情况下单击新页面时更改活动 class

Changing active class when clicking on new page without refreshing

javascript

jquery

jinja2

flask