1

jinja2 の for ループでブートストラップ 4 dev タブを動作させようとしています。

私が試しているテストコードは次のとおりです。

<!-- 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」の 2 つのタブが表示され、アクティブなクラスが正しく適用されます。

ただし、ナビゲーション タブ間をクリックしてもコンテンツ タブは変わりません。コンテンツ タブは "1" で静的です。

loop.index 条件を loop.index == 2 に変更すると、タブの内容は "2" で静的になります。

ここで何が欠けていますか？

ありがとう。

4

1 に答える 1

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データストアクエリに変更するとうまくいきました。

于 2015-12-07T09:15:06.483 に答える