Bootstrap JS dynamici c tabs - каждая навигационная ссылка меняет один и тот же элемент

Question

Я пытаюсь создать список динамических c карт. Я почти закончил, но появилась одна проблема. Когда я меняю ссылки на последний объект, навигационные ссылки работают нормально, но когда я хочу изменить другие объекты, тот же последний объект меняется.

HTML

{% extends "post/base.html" %}
{% block title %}
    <title>Home Page</title>
{% endblock title %}
{% block content %}
    {% for obj in EveryPost %}
        <div class="card text-center">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="PL-tab" data-toggle="tab" href="#PL" role="tab" aria-controls="PL" aria-selected="true">PL</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="RU-tab" data-toggle="tab" href="#RU" role="tab" aria-controls="RU" aria-selected="false">RU</a>
                </li>
                </ul>
            </div>
            <div class="card-body tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="PL" role="tabpanel" aria-labelledby="PL-tab">
                <h5 class="card-title"><a href="{% url 'detailpost' obj.pk %}">{{ obj.title_pl }}</a></h5>
                <p class="card-text">{{ obj.text_pl|truncatechars:350 }}</p>
                <a href="{% url 'detailpost' obj.pk %}" class="btn btn-dark float-right">Zobacz całość</a></div>
                <div class="tab-pane fade" id="RU" role="tabpanel" aria-labelledby="RU-tab">
                <h5 class="card-title"><a href="{% url 'detailpost' obj.pk %}">{{ obj.title_ru }}</a></h5>
                <p class="card-text">{{ obj.text_ru|truncatechars:350 }}</p>
                <a href="{% url 'detailpost' obj.pk %}" class="btn btn-dark float-right">Zobacz całość</a></div>
            </div>
            <div class="card-footer text-muted">
                <span class="float-left">{{ obj.date|date:"d M y" }}</span>
                <span class="float-right">Przesłane przez: {{ obj.User }}</span>
            </div>
        </div>
    {% endfor %}
{% endblock content %}

Answer 1

это произошло потому, что в forl oop у вас есть класс "active", доступный для всех предметов. но вы должны отфильтровать его, чтобы иметь такие классы только для одного элемента. например, этот тег должен быть таким:

<a class="nav-link active" id="PL-tab" data-toggle="tab" href="#PL" role="tab" aria-controls="PL" aria-selected="true">PL</a>

->

 <a class="nav-link {% if forloop.counter == 1 %} active {% endif %} id="PL-tab" data-toggle="tab" href="#PL" role="tab" aria-controls="PL" aria-selected="true">PL</a>

, но есть и другие теги, и вы должны сделать то же самое для них.

Я забыл упомянуть очень важный совет! Наряду с «активным» классом также есть идентификатор (id), который остается неизменным для всех объектов в forl oop! и это означает, что любая функция JavaScript, нацеленная на специальный «идентификатор», будет работать на всех элементах, имеющих этот идентификатор тоже !! в тегах html для создания другого идентификатора просто сделайте это:

    <a id="sth-{{ forloop.counter }}" >the link</>.  

, который был, например, тегом. но я вижу, что у вас есть некоторые другие теги, которые имеют идентификатор, и в отношении вашего кода все они будут иметь одинаковый идентификатор после рендеринга кода с помощью django.

{% for obj in EveryPost %}
    <div class="card text-center">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" id="myTab-{{ forloop.counter0 }}" role="tablist">
            <li class="nav-item">
                <a class="nav-link {% if forloop.counter==1 %} active {% endif %}" id="PL-tab-{{ forloop.counter0 }}" data-toggle="tab" href="#PL-{{ forloop.counter0 }}" role="tab" aria-controls="PL" aria-selected="true">PL</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="RU-tab-{{ forloop.counter0 }}" data-toggle="tab" href="#RU-{{ forloop.counter0 }}" role="tab" aria-controls="RU" aria-selected="false">RU</a>
            </li>
            </ul>
        </div>
        <div class="card-body tab-content" id="myTabContent-{{ forloop.counter0 }}">
            <div class="tab-pane fade show {% if forloop.counter==0 %} active {% endif ©}" id="PL-{{ forloop.counter0 }}" role="tabpanel" aria-labelledby="PL-tab">
            <h5 class="card-title"><a href="{% url 'detailpost' obj.pk %}">{{ obj.title_pl }}</a></h5>
            <p class="card-text">{{ obj.text_pl|truncatechars:350 }}</p>
            <a href="{% url 'detailpost' obj.pk %}" class="btn btn-dark float-right">Zobacz całość</a></div>
            <div class="tab-pane fade" id="RU-{{ forloop.counter0 }}" role="tabpanel" aria-labelledby="RU-tab">
            <h5 class="card-title"><a href="{% url 'detailpost' obj.pk %}">{{ obj.title_ru }}</a></h5>
            <p class="card-text">{{ obj.text_ru|truncatechars:350 }}</p>
            <a href="{% url 'detailpost' obj.pk %}" class="btn btn-dark float-right">Zobacz całość</a></div>
        </div>
        <div class="card-footer text-muted">
            <span class="float-left">{{ obj.date|date:"d M y" }}</span>
            <span class="float-right">Przesłane przez: {{ obj.User }}</span>
        </div>
    </div>
{% endfor %}