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

rkkpypqq  于 2023-04-09  发布在  Bootstrap
关注(0)|答案(1)|浏览(131)

我正在尝试在for循环django模板中激活一个标签navlink。每个链接都传递id,基于id匹配我想激活nav-link。
这是我的模板html页面,这是循环,在这里我检查条件,使导航链接活动。我不能突出显示导航链接。

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

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

krcsximq

krcsximq1#

在你的代码中,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>

相关问题