具有活动类的多个菜单项答案

【问题标题】：multiple menu items with active class具有活动类的多个菜单项
【发布时间】：2018-08-14 08:40:11
【问题描述】：

这让我发疯了。我正在创建一个烧瓶应用程序，并将 Bootstrap（最新版本）用于很多 css 和 js 的东西。这个引导程序附带了一个 js 函数，可以将一个活动类添加到您上次单击的菜单项。这适用于大多数菜单，但在某些情况下，添加了 2 个项目的活动类。

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>

是的，网址实际上是我的应用程序中的数字。发生的情况如下：活动类工作正常 1、2、5 和 6。单击 3 时，nr 1 也处于活动状态，单击 4 时，nr 2 也处于活动状态。为什么？我看到的唯一相似之处是 url 中的最后一个数字，但这不会导致这个问题，对吗？

【问题讨论】：

您可以编辑您的帖子以包含显示此内容的代码 sn-p 吗？帮助您解决这些问题会容易得多。
很确定你成功了......很可能你的代码只是在看最后一个数字，但直到我们看到其他代码，特别是我们不知道的 JS 代码。
让我先从引导程序中找出那部分。我会尽快回来的

标签： javascript css bootstrap-4

【解决方案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 语句以检查斜线后的所有内容，从而解决了问题。

【讨论】：