如何在Django模板动态for循环中设置Bootstrap NavLink为激活状态

架构老林

2026-7-25

问题修复方案

核心问题分析

你的代码无法高亮导航链接的主要原因是类型不匹配：视图中传递的typeid在非"all"场景下是字符串类型，而模板中type.id是整数类型，两者比较时不会相等。此外，"All"链接缺少激活状态的判断逻辑。

修复步骤

1. 修正视图中的类型转换

在视图函数中，将非"all"的id转换为整数后再传递给模板，确保类型一致：

def store(request, id):
    if id == "all":
        store_list = Store.objects.all().order_by('id')
        typeid = id
    else:
        # 转换为整数，避免类型不匹配
        typeid = int(id)
        store_list = Store.objects.filter(store_type=typeid).order_by('id')
    return render(request, 'core_app/store/all_store.html', {
        'stores': store_list, 
        'typeid': typeid, 
        "store": "active", 
        'store_list': 'active', 
        'store_type': StoreType.objects.all()
    })

2. 优化模板代码，添加激活状态判断

简化模板中的重复代码，同时为"All"链接添加激活状态判断：

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

3. 修正模型中的拼写错误

注意你的Store模型存在拼写错误，应该是models.Model而非model.Model：

class Store(models.Model):  # 修正为models.Model
      store_type = models.ForeignKey(StoreType, on_delete=models.CASCADE)  # 补充完整外键参数
      name = models.CharField(max_length=255, blank=True, null=True)
      ...