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生成中的id中的<a class="nav-link"（发布的第一个代码块）不是控制第二个代码示例中的标签动作的因素，而是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>

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

1 个答案: