Jinja2& Flask:Bootstrap选项卡仅显示第一个选项卡的内容，而不显示其余选项卡的内容 [英] Jinja2 & Flask: Bootstrap Tabs display the content for the first tab only and not the rest

问题描述

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

I'm using Jinja2 and Python to generate html and I'm also using bootstrap for the css and js. I'm trying to create Bootstrap pill tabs by using Jinja2 for loops and some other logic. Here is what my code looks like:

我将此字典与要生成的html文件的名称一起传递给flask的render_template函数:

I pass this dictionary into the render_template function of flask along with the name of the html file I want to generate:

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

词典的键代表在加载网站时显示为选项卡名称的文本.键的值表示传递给标记的html属性的字符串(一旦您查看下面的html，它将变得更加清楚).当任何用户加载网站时，第一个选项卡处于活动状态/已选中，其余选项卡未处于活动状态.我在html文件中使用了Jinja2逻辑来生成标签和内容:

The keys of the dictionary represent the text that is displayed as the name of the tab when the website is loaded. The values of the keys represent the string that is passed to the html attributes for the tags (This will become clearer once you look at the html below). The first tab is active/selected and the rest are not when the any user loads the website. I use this Jinja2 logic in the html file to generate the tabs and content:

<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:

After doing this, I generate the content for each tab by using another for loop. Here is the 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.是什么导致此行为，我该如何解决?预先感谢.

I know that the last two tabs are supposed to have the same content: Hope this works and the first tab is supposed to have This is a tab. However, when I run the code, all three tabs say the same thing: This is a tab. What is causing this behavior and how can I fix it? Thanks in advance.

推荐答案

标签html生成中的<a class="nav-link"的id(发布的第一个代码块)不是控制第二个代码中的标签操作的因素样本:href.但是，在第一个代码块中，href是{{ attr }}，而在第二个代码块中，{{ attr }}_c.相反，请尝试使用相同的href({{ attr }}_c"):

The id of your <a class="nav-link"s in your tab html generation (the first code block posted) is not what controls the tab action in the second code sample: rather, the href. However, in the first code block, the href is {{ attr }}, while in the second, {{ attr }}_c. Instead, try using the same href ({{ attr }}_c"):

在第一个代码块中更新<a class:

Update the <a class in the first code block:

<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:Bootstrap选项卡仅显示第一个选项卡的内容，而不显示其余选项卡的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！