Panneaux d'onglets Bootstrap avec une boucle Jinja2 pour

Question

J'essaie d'obtenir 4 dev tab bootstrap fonctionnant avec une boucle for dans jinja2.

est ici le code de test, je suis en train:

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

La fonction onglets de navigation comme prévu, deux onglets sont visibles, « 1 » et « 2 », et la classe active est correctement appliquée. Toutefois, les onglets de contenu ne changent pas lorsque vous cliquez entre les onglets de navigation. L'onglet de contenu est statique sur "1". Changer la condition loop.index en boucle.index == 2 signifie que le contenu de l'onglet est statique sur "2".

Qu'est-ce que je manque ici?

Merci.

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 %} 

Modification de la boucle à partir d'une gamme à la requête de banque de données NDB travail effectuées.