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

Posted 2023-03-05

【中文标题】Jinja2 和 Flask：引导选项卡仅显示第一个选项卡的内容，而不显示其余选项卡的内容

【英文标题】：Jinja2 & Flask: Bootstrap Tabs display the content for the first tab only and not the rest

【发布时间】：2018-12-02 23:49:34

【问题描述】：

我正在使用 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。是什么导致了这种行为，我该如何解决？提前致谢。

【参考方案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>

【讨论】：

天哪。太感谢了。长期以来，我一直在努力寻找解决方案。你刚进来，马上就给出了正确的答案。你是最好的。谢谢！！！

@RanganaHerath 很高兴为您提供帮助！