Jinja2 和 Flask：引导选项卡仅显示第一个选项卡的内容，而不显示其余选项卡的内容

Question

我正在使用 Jinja2 和 Python 来生成 html，并且我还使用引导程序来生成 css 和 js。我正在尝试使用 Jinja2 for 循环和其他一些逻辑来创建 Bootstrap 药丸标签。这是我的代码的样子：

我将这个字典连同我要生成的 html 文件的名称一起传递给 flask 的 render_template 函数：

my_dict = {"First tab": "tab1", "Second tab": "tab2", "Third tab": "tab3"}

字典的键表示加载网站时显示为选项卡名称的文本。键的值表示传递给标签的 html 属性的字符串（查看下面的 html 后会更清楚）。第一个选项卡处于活动状态/选中状态，其余选项卡在任何用户加载网站时都没有。我在 html 文件中使用这个 Jinja2 逻辑来生成选项卡和内容：

<ul class="nav nav-pills nav-fill" id="pills-tab" role="tablist">
    {% for name, attr in my_dict.items() %}

        {% if loop.index == 1 %}
            <li class="nav-item">
                <a class="nav-link active" id="{{ attr }}" data-toggle="pill" href="#{{ attr }}" role="tab"
                   aria-controls="{{ attr }}_c" aria-selected="true">{{ name }}
                </a>
            </li>

        {% else %}
            <li class="nav-item">
                <a class="nav-link" id="{{ attr }}" data-toggle="pill" href="#{{ attr }}" role="tab"
                   aria-controls="{{ attr }}_c" aria-selected="false">{{ name }}
                </a>
            </li>
        {% endif %}
    {% endfor %}
</ul>

完成此操作后，我使用另一个for 循环为每个选项卡生成内容。这是html：

<div class="tab-content" id="pills-tabContent">

    {% for attr in my_dict.values() %}

        {% if loop.index == 1 %}

            <div class="tab-pane fade show active" id="{{ attr }}_c" role="tabpanel"
                 aria-labelledby="{{ attr }}">
                <h4>This is a tab</h4>
            </div>

        {% else %}

            <div class="tab-pane fade" id="{{ attr }}_c" role="tabpanel" aria-labelledby="{{ attr }}">
                <h4>Hope this works</h4>
            </div>

        {% endif %}

    {% endfor %}

</div>

我知道最后两个标签应该有相同的内容：Hope this works，第一个标签应该有This is a tab。但是，当我运行代码时，所有三个选项卡都显示相同的内容：This is a tab。是什么导致了这种行为，我该如何解决？提前致谢。

Answer 1

标签 html 生成中的 <a class="nav-link"s 中的 id（发布的第一个代码块）不是控制第二个代码示例中的标签操作的东西：而是 href。但是，在第一个代码块中，href 是 {{ attr }}，而在第二个代码块中，{{ attr }}_c。相反，请尝试使用相同的href ({{ attr }}_c")：

更新第一个代码块中的<a class：

<a class="nav-link active" id="{{ attr }}" data-toggle="pill" href="#{{ attr }}_c" role="tab"
    aria-controls="{{ attr }}_c" aria-selected="true">{{ name }}
</a>