如何在 django 模板中动态生成的 for 循环中激活 bootstrap navlink

Question

我正在尝试使标签导航链接在 for 循环 django 模板中处于活动状态。每个链接都在传递 id，基于 id 匹配我想让导航链接处于活动状态。

这是我的模板 html 页面，这是 for 循环，在这里我正在检查条件以使导航链接处于活动状态。我无法突出显示导航链接。

<ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link" href="{% url 'core_app:store' 'all' %}">All</a>
    </li>
  {% for type in store_type %}
     {% if type.id == typeid %}
        <li class="nav-item">
          <a class="nav-link active" href="{% url 'core_app:store' type.id %}">{{type.name}}</a>
        </li>
     {% else %}
        <li class="nav-item">
           <a class="nav-link" href="{% url 'core_app:store' type.id %}">{{type.name}}</a>
        </li>
     {% endif %}
  {% endfor %}
</ul>

这是我的查看代码 在这里，我获取所有

store_type

并基于链接点击和传递 id，我正在提取商店类型。然后我想强调我的导航链接活动基于条件匹配

def store(request, id):
    if id == "all":
        store_list = Store.objects.all().order_by('id')
    else:
        store_list = Store.objects.all().filter(store_type=int(id)).order_by('id')
    return render(request, 'core_app/store/all_store.html', {'stores': store_list, 'typeid': id, "store": "active", 'store_list': 'active', 'store_type': StoreType.objects.all()})

模型（商店有 StoreType）

class StoreType(models.Model):
      name = models.CharField(max_length=255, blank=True, null=True)
      ...
      def __str__(self):
          return self.name

class Store(model.Model):
      store_type = models.ForeignKey(...)
      name = models.CharField(max_length=255, blank=True, null=True)
      ...

请帮我解决这个问题或建议我更好的解决方案。谢谢

Answer 1

在你的代码中 typeid 是一个字符串，而 type.id 是一个整数，只要把它转换成一个整数就可以了：

<ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link {% if typeid|int == 0 %}active{% endif %}" href="{% url 'core_app:store' 'all' %}">All</a>
    </li>
  {% for type in store_type %}
     {% if type.id == typeid|int %}
        <li class="nav-item">
          <a class="nav-link active" href="{% url 'core_app:store' type.id %}">{{type.name}}</a>
        </li>
     {% else %}
        <li class="nav-item">
           <a class="nav-link" href="{% url 'core_app:store' type.id %}">{{type.name}}</a>
        </li>
     {% endif %}
  {% endfor %}
</ul>