Question

这真让我发疯。我正在创建一个Flask应用程序，并使用Bootstrap（最新版本）来处理许多CSS和JS。这个引导程序附带了一个js函数，用于将活动类添加到上次单击的菜单项。这对于大多数菜单来说都可以正常工作，但是在某些情况下，添加了两个活动类。

css：

.nav-sidebar > .active > a { color: #fff; background-color: #428bca;}

html：

            <li><a href="1">1</a></li>
            <li><a href="2">2</a></li>
            <li><a href="11">3</a></li>
            <li><a href="12">4</a></li>
            <li><a href="13">5</a></li>
            <li><a href="14">6</a></li>

是的，URL实际上是我的应用程序中的数字。发生了以下情况：活动类正常运行1、2、5和6。单击3时，nr 1也处于活动状态；单击4时，nr 2也处于活动状态。为什么？我看到的唯一相似之处是网址中的最后一个数字，但这不是造成此问题的原因吗？

Answer 1

好吧，发现它实际上是导致此问题的忍者宏。

{% macro nav_link(endpoint, name) %} {% if request.endpoint.endswith(endpoint) %} <li class="active"><a href="{{ url_for(endpoint) }}">{{name}}</a></li> {% else %} <li><a href="{{ url_for(endpoint) }}">{{name}}</a></li> {% endif %} {% endmacro %}

我更改了if语句以检查斜杠后的所有内容，从而解决了问题。

具有活动班级的多个菜单项

1 个答案: