Панели вкладок Bootstrap с циклом Jinja2 for

Я пытаюсь заставить вкладки разработчика bootstrap 4 работать с циклом for в jinja2.

Вот тестовый код, который я пытаюсь:

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

Что мне здесь не хватает?

Спасибо.


bootstrap-4 jinja2 twitter-bootstrap-4
person zmdc    schedule 06.12.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward 

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

person zmdc    schedule 07.12.2015