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

Question

我正在使用 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>

有人可以指导我问题可能出在哪里吗？

Answer 1

在我的项目中，我使用下面的代码来使其工作。您可以根据此 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>

Answer 2

在 JavaScript 中比较 falsy 时，如果存在特殊字符，则 if 返回始终为 false。我认为“/”是这些字符之一。您可以对两个字符串执行 "string".trim() 来解决此问题，或者在 Steafdof ==

中使用 ===

Answer 3

有点晚了，但也许对某人有用

{% set active_page = 'services' %}

<a href="#" class=" {{'active' if active_page =='services' else '' }}">Services</a>