jinja2 - 带有 Jinja2 for 循环的引导选项卡面板

Question

我正在尝试让 bootstrap 4 dev 选项卡与 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”，并且正确应用了活动类。

但是，在导航选项卡之间单击时，内容选项卡不会更改。内容选项卡在“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 数据存储查询有效。