Django法律判决网站点击标题展示对应判决内容的实现问题

问题根源 #

你当前的实现存在两个核心错误：

1. 模板中的判断逻辑{% if data.title in data.judgments %}和点击行为完全无关，仅会判断「当前遍历的判决标题是否存在于该判决的正文中」，只要满足条件的内容都会全部输出，自然会展示所有判决内容
2. 点击事件openLawtype没有传递当前点击的判决唯一标识，也没有配套的内容显隐控制逻辑，无法关联标题和对应内容

可行实现方案 #

方案1：同页无刷新切换（适合数据量较小的场景） #

无需修改后端代码，仅调整模板和JS逻辑即可：

1. 修改标题按钮渲染代码

用每条判决的唯一主键ID作为标识，传入点击事件：

{% for data in law_data %}
    {% if data.law_type == 'civil' and data.law_category == 'limitations' %}
        <div class="tab">
            <button class="tablinks" onclick="openLawtype(event, '{{ data.id }}')">
                {{data.title}} &nbsp<i class="fas fa-chevron-circle-right"></i>
            </button>  
        </div>
    {% endif %}
{% endfor %}

2. 修改判决内容渲染代码

给每个内容块绑定对应ID，默认全部隐藏：

{% for data in law_data %}
    {% if data.law_type == 'civil' and data.law_category == 'limitations' %}
        <div class="law-content" id="law-{{ data.id }}" style="display:none;">
            {% if data.judgments %}
                {{data.judgments|safe}}
            {% else %}
                <p> no data available</p>    
            {% endif %}
        </div>
    {% endif %}
{% endfor %}

3. 补充JS显隐控制逻辑

function openLawtype(event, lawId) {
    // 隐藏所有判决内容
    document.querySelectorAll('.law-content').forEach(item => {
        item.style.display = 'none'
    })
    // 移除所有按钮的激活样式
    document.querySelectorAll('.tablinks').forEach(btn => {
        btn.classList.remove('active')
    })
    // 仅展示当前选中的判决内容，给当前按钮加激活样式
    document.getElementById('law-' + lawId).style.display = 'block'
    event.currentTarget.classList.add('active')
}

方案2：单独详情页（通用主流实现，适合数据量大的场景） #

如果你的判决库数据量很大，一次性加载所有内容会拖慢页面速度，更推荐用单独详情页的实现方式：

1. 新增urls.py路由：

path('judge/detail/<int:law_id>/', views.judge_detail, name='judge_detail')

2. 新增views.py详情视图：

from django.shortcuts import get_object_or_404

def judge_detail(request, law_id):
    law = get_object_or_404(Laws, id=law_id)
    return render(request, 'judge_detail.html', {'law': law})

3. 模板中的标题按钮改成跳转链接即可，点击后会进入对应判决的单独详情页：

<a href="{% url 'judge_detail' data.id %}" class="tablinks">{{data.title}} &nbsp<i class="fas fa-chevron-circle-right"></i></a>

内容的提问来源于stack exchange，提问作者Ritankar Bhattacharjee