Bootstrap 5 和 Flask 无法在当前 html 页面上设置活动类答案

【问题标题】：Bootstrap 5 and Flask not able to set active class on current html pageBootstrap 5 和 Flask 无法在当前 html 页面上设置活动类
【发布时间】：2023-01-28 06:33:31
【问题描述】：

我正在构建一个烧瓶网络应用程序，我现在正在处理导航栏。我正在使用 bootsrap 5 来设计样式。现在我尝试在使用此代码单击导航栏特定页面时设置 class=active

          <nav class="navbar navbar-expand-md navbar-dark bg-dark">
             <ul>
                <li class="{{ 'active' if active_page == 'edit_profile' else '' }}">
                    <a href="{{ url_for('auth.edit_profile') }}">Link 1</a>
                </li>

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

              </ul>
         </nav>

此代码在我的 base.html 模板中

然后到我添加的每个单独的模板

 {% extends "base.html" %}
 {% set active_page = "edit_profile.html" %}

但是，每当我点击 Link1 时，它都不会“保持活动状态”。当我将鼠标悬停在它上面时，我可以看到它会改变颜色，但是当单击它时，它不会保持活动状态。

单击导航栏项目后，如何使它保持项目状态？

我的代码缺少什么？

【问题讨论】：

标签： html flask bootstrap-4 navbar bootstrap-5

【解决方案1】：

可以使用request对象的endpoint属性来测试是否添加active类。 Bootstrap 5 的实现看起来像这样。

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a 
                class="nav-link{% if request.endpoint == 'auth.edit_profile' %} active{% endif %}" 
                href="{{ url_for('auth.edit_profile') }}"
            >Link 1</a>
        </li>
        <!-- ... -->
    </ul>
</nav>

【讨论】：