你看过这个了吗https://jinja.palletsprojects.com/en/3.0.x/tricks/#highlighting-active-menu-items

高亮显示活动菜单项

通常，您希望导航栏具有活动导航项。这真的很容易实现。由于子模板中块之外的分配是全局的，并且在评估布局模板之前执行，因此可以在子模板中定义活动菜单项：

{% extends "layout.html" %}
{% set active_page = "index" %}

字符串
布局模板然后可以访问active_page。此外，为该变量定义一个默认值是有意义的：

{% set navigation_bar = [
    ('/', 'index', 'Index'),
    ('/downloads/', 'downloads', 'Downloads'),
    ('/about/', 'about', 'About')
] -%}

{% set active_page = active_page|default('index') -%}
...
<ul id="navigation">
    {% for href, id, caption in navigation_bar %}
    <li{% if id == active_page %} class="active"{% endif
    %}><a href="{{ href|e }}">{{ caption|e }}</a>
    </li>
{% endfor %}
</ul>

型

这里是另一个更简单的方法，如果你有菜单分布在整个页面。这种方式使用内联if语句打印出类active。

<ul>

<li class="{{ 'active' if active_page == 'menu1' else '' }}">
<a href="/blah1">Link 1</a>
</li>

<li class="{{ 'active' if active_page == 'menu2' else '' }}">
<a href="/blah2"> Link 2 </a>
</li>

</ul>

字符串
类活动用于突出显示
您仍然需要在每一页上设置变量来标记它们

{% extends "master.html" %}
{% set active_page = "menu1" %}

型
或

{% set active_page = "menu2" %}

型

对于jinja/flask/bootstrap用户：
如果你像在博客例子http://getbootstrap.com/examples/blog/中那样定义你的导航，只需为你的链接分配与你的 url_for 参数匹配的id，你只需要修改布局模板，剩下的就可以了。

<nav class="blog-nav">
  <a id="allposts"  class="blog-nav-item" href="{{ url_for('allposts')}}">All Posts</a>
  <a id="index"     class="blog-nav-item" href="{{ url_for('index')}}">Index</a>
  <a id="favorites" class="blog-nav-item" href="{{ url_for('favorites')}}">Favorites</a>
</nav>

字符串
在你的基础/布局模板的底部添加这个

<script>
  $(document).ready(function () {
  $("#{{request.endpoint}}").addClass("active"); })
</script>

型
并且正确的元素将被设置为活动的。

**编辑：**如果你有一个列表中的元素布局，像这样：

<nav class="blog-nav">
  <ul class="nav navbar-nav">
    <li>
        <a id="allposts"  class="blog-nav-item" href="{{ url_for('allposts')}}">All Posts</a>
    </li>
    <li>
        <a id="index"     class="blog-nav-item" href="{{ url_for('index')}}">Index</a>
    </li>
    <li>
        <a id="favorites" class="blog-nav-item" href="{{ url_for('favorites')}}">Favorites</a>
    </li>
  </ul>
</nav>

型
使用**parent（）**函数获取li元素而不是链接。

<script>
    $(document).ready(function () {
    $("#{{request.endpoint}}").parent().addClass("active"); })
</script>

型

我们可以通过使用jinja if语句来激活类

<ul class="nav navbar-nav">
     <li class="{% if request.endpoint=='home' %}active{%endif %}"><a href="{{  url_for('home') }}">home</a></li>
     <li class="{% if request.endpoint=='add_client' %}active{%endif %}"><a href="{{  url_for('add_client') }}">Add Report</a></li>
    </li>
  </ul>

字符串

我喜欢@philmaweb的方法，但真的没有理由要求在每个元素的id中复制端点。

• base.js：*

$(document).ready(function () {
    var scriptElement = $('#baseScript')[0];
    var path = scriptElement.getAttribute('data-path');
    $('a[href="'+path+'"]').addClass("active");
});

字符串
网站Map

<script id="baseScript" src="{{ url_for('static', filename='js/base.js') }}"
data-path="{{ request.path }}"></script>

型
为什么不直接把这个脚本内联呢？当然可以，但允许内联JS是a security nightmare。您应该在您的站点上使用CSP（例如Flask-Talisman），它不允许内联JS。有了data-*属性，以安全的方式实现这一点并不难。
注意：如果你有多个链接指向同一个当前页面，而你只希望其中一个被标记为“活动”，那么这种方法可能不适合你。

我尝试了不同的解决方案，因为Codegeek的解决方案1没有工作，因为我有多个UI和li，所以我只是在template.html中包含我的导航栏

{% include 'sidebar.html' %}

字符串
然后在li类中的Navbar文件中，您可以在“request.endpoint”的帮助下将其设置为活动，但它将再次返回整个路由，而不是使用split并获取最后一个路由名称，并在相同的情况下设置为活动。

<li class="{% if request.endpoint.split('.')[1] == 'index' %} active {% else %}  {% endif %}">

型
request.endpoint.split('.')[1]将返回路由例如localhost/example。你会得到你可以比较和使用的例子。如果你不拆分并使用request.endpoint，那么你将得到'file.example'（整个路由）。

在页面的某个地方添加以下CSS：
第一个月
现在，在每个模板上定义page_name，例如：
{% extends "template.html" %} {% set page_name = "gallery" %}个
这似乎比其他选项更简单，更容易构建。
编辑：
差不多一年后，我回来使这个更简单的修复，因为设置每个页面上的页面名称是相当低效的。
创建一个类似这样的函数：

@app.context_processor
def context_processor():
    out = {}
    out['request'] = request # Make sure you import request from flask
    return out

字符串
这将允许您隐式地将变量传递给jinja，在本例中，我们将访问请求传递给request.url_rule，其中包含用户正在访问的路由。在以前的版本中，我们只是将{{ page_name|default("'/'"|safe) }}更改为"{{ request.url_rule|safe }}"。干净多了。

我不想在子页面中定义ID，因为我拥有的许多链接都没有特定的子模板。
使用request.base_url，如果它与_externalurl_for路线匹配，则将该导航项渲染为活动。

{% set nav_items = [
    ("public.home", "Home"),
    ("public.downloads", "Downloads"),
    ("public.about", "About")
    ("account.login", "Login"),
 ]
 -%}

...

   <ul class="navbar-nav mr-auto">
   {% for route, display_text in  nav_items %}
     <li class={% if request.base_url == url_for(route, _external=True) %}"nav-item active"{% else %}"nav-item"{% endif %}>
       <a class="nav-link" href="{{ url_for(route) }}">{{ display_text }}
     {% if request.base_url == url_for(route, _external=True) %}<span class="sr-only">(current)</span>{% endif %}
       </a>
     </li>
   {% endfor %}
   </ul>

字符串

向@pablo-vilas大喊！上面的评论。

最简单动态：

使用request.path[1:]，然后在url_for路径中设置==，这样就完成了。

• 除了主页/外，其余页面都是空引号''

无需额外设置或JavaScript自定义！

Copy-Pasta示例：

...
<li class="nav-item btn btn-sm btn-dark"><a class="nav-link{{ 'active' if request.path[1:] == '' else ''}}" href="{{ url_for('home') }}">Home</a></li>
<li class="nav-item btn btn-sm btn-dark"><a class="nav-link{{ 'active' if request.path[1:] == 'about' else ''}}" href="{{ url_for('about') }}">About</a></li>
<li class="nav-item btn btn-sm btn-dark"><a class="nav-link{{ 'active' if request.path[1:] == 'dashboard' else ''}}" href="{{ url_for('dashboard') }}">About</a></li>
...

字符串