Bootstrap JS 动态选项卡-每个导航链接更改相同的元素

Question

我正在尝试创建动态卡列表。 我快完成了，但出现了一个问题。 当我更改最后一个对象的链接时，导航链接工作正常，但是当我想更改另一个对象时，相同的最后一个对象会更改。

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

发生这种情况是因为在 forloop 中，所有项目都可以使用“活动”类。 但是您必须对其进行过滤，以便仅针对一个项目使用此类类。 例如这个标签应该是这样的：

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

但也有其他标签，你应该为他们做同样的事情。

我忘了提一个非常重要的提示！ 除了“活动”类之外，forloop 中的所有对象的 ID (id) 也是相同的！ 这意味着任何以特殊“id”为目标的 JavaScript 函数也将适用于所有具有该 id 的元素！！ 在 html 标签中制作不同的 id 只需这样做：

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

例如，这是一个标签。 但我可以看到你有一些其他的标签有一个 id，并且关于你的代码，在通过 django 呈现代码后，所有这些标签都将具有相同的 id。

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