Question

我试图在jinja2中使用for循环来启动boot 4开发标签。

这是我尝试的测试代码：

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

导航标签按预期运行，两个标签可见，＆＃34; 1＆＃34;和＆＃34; 2＆＃34;，并且正确应用了活动类。

但是，在导航标签之间单击时，内容标签不会更改。内容选项卡在＆＃34; 1＆＃34;。

上是静态的

将loop.index条件更改为loop.index == 2表示选项卡内容在＆＃34; 2＆＃34;上是静态的。

我在这里缺少什么？

感谢。

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数据存储区查询。

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

1 个答案: