Панель вкладок Bootstrap с Jinja2 для цикла

Question

Я пытаюсь получить 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», а активный класс корректно применяется.

Однако вкладки содержимого не изменяются при нажатии между вкладками nav. Вкладка содержимого статична на «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 %} 

Изменение для цикла из диапазона до фактического хранилища данных запроса ОПРС работал.