Bootstrap 带有 Jinja2 for 循环的选项卡面板

Question

我正在尝试获取 bootstrap 4 个在 jinja2 中使用 for 循环的开发选项卡。

这是我正在尝试的测试代码：

<!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    {% for e in range(1,3) %}
      <li class="nav-item">
        <a class="nav-link {% if loop.index == 1 %}active{% endif %}" href="#{{ e }}" role="tab"
           data-toggle="tab">{{ e }}</a>
      </li>
    {% endfor %}
  </ul>

<!-- Tab panes -->
  <div class="tab-content">
    {% for e in range(1,3) %}
      <div role="tabpanel" class="tab-pane fade {% if loop.index == 1 %}in active{% endif %}"
           id="{{ e }}">{{ e }}</div>
    {% endfor %}
  </div>

导航选项卡按预期运行，两个选项卡可见，“1”和“2”，活动 class 已正确应用。

但是，在导航选项卡之间单击时，内容选项卡不会更改。内容选项卡在“1”上是静态的。

将 loop.index 条件更改为 loop.index == 2 意味着选项卡内容在“2”上是静态的。

我在这里错过了什么？

谢谢。

Answer 1

<!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
{% for club in clubs %}
  <li class="nav-item">
    <a class="nav-link {% if loop.index == 1 %}active{% endif %}" href="#{{ club }}" role="tab"
       data-toggle="tab">{{ club }}</a>
  </li>
{% endfor %}

<!-- Tab panes -->
<div class="tab-content">
{% for club in clubs %}
  <div role="tabpanel" class="tab-pane fade {% if loop.index == 1 %}in active{% endif %}"
       id="{{ clubs }}">{{ clubs }}</div>
{% endfor %}

将 for 循环从范围更改为实际 NDB 数据存储区查询有效。

Bootstrap 带有 Jinja2 for 循环的选项卡面板

Bootstrap Tab Panels with a Jinja2 for loop

jinja2

twitter-bootstrap-4

bootstrap-4