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

Question

我正在使用 Jinja 模板实现一个烧瓶应用程序，并且我正在尝试根据用户当前所在的 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

在我的项目中，我使用以下代码使其工作。您可以检查给定的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 时，如果存在特殊字符，则返回始终为 false。我认为“/”是这些字符之一。您可以在两个字符串上执行 "string".trim() 来解决这个问题，或者在 steafdof ==

中使用 ===