Django环境下导航栏按钮控制Div显隐的功能优化求助

嘿，这个需求我熟！之前也帮朋友优化过类似的导航切换功能，咱们直接把重复的代码干掉，让逻辑更清晰，还完美实现你要的效果～

第一步：用CSS设置初始显示状态 #

页面加载时直接让hearts显示，其他三个隐藏，比用JS控制更高效，还能避免页面闪烁：

/* 在你的CSS文件或者<style>标签里添加 */
#diamonds, #clubs, #spades {
    display: none;
}
#hearts {
    display: block;
}

第二步：简化JavaScript逻辑 #

原来四个重复的函数太冗余了，咱们写一个通用函数，点击按钮时统一处理所有区域的显示隐藏：

function showCardSection(targetId) {
    // 获取所有卡片区域的DOM元素
    const allCardSections = document.querySelectorAll('#diamonds, #clubs, #hearts, #spades');
    
    // 先把所有区域隐藏
    allCardSections.forEach(section => {
        section.style.display = 'none';
    });
    
    // 再显示目标区域
    document.getElementById(targetId).style.display = 'block';
}

第三步：更新HTML按钮调用 #

把原来的四个onclick事件改成调用这个通用函数，传对应区域的ID就行：

<button onclick="showCardSection('diamonds')">Diamonds</button>
<button onclick="showCardSection('clubs')">Clubs</button>
<button onclick="showCardSection('hearts')">Hearts</button>
<button onclick="showCardSection('spades')">Spades</button>

<div id="diamonds">...</div>
<div id="clubs">...</div>
<div id="hearts">...</div>
<div id="spades">...</div>

进阶：结合Django模板的优雅实现 #

既然你用Django，咱们可以利用模板引擎减少重复代码，以后要加新卡片直接改视图数据就行：

视图层（views.py） #

先把卡片数据整理成列表传给模板：

def your_view(request):
    card_sections = [
        {'id': 'diamonds', 'name': 'Diamonds', 'is_default': False},
        {'id': 'clubs', 'name': 'Clubs', 'is_default': False},
        {'id': 'hearts', 'name': 'Hearts', 'is_default': True},
        {'id': 'spades', 'name': 'Spades', 'is_default': False},
    ]
    return render(request, 'your_template.html', {'card_sections': card_sections})

模板层（your_template.html） #

用循环生成按钮和卡片区域：

<!-- 生成导航按钮 -->
{% for section in card_sections %}
    <button onclick="showCardSection('{{ section.id }}')">{{ section.name }}</button>
{% endfor %}

<!-- 生成卡片内容区域 -->
{% for section in card_sections %}
    <div 
        id="{{ section.id }}" 
        style="display: {{ 'block' if section.is_default else 'none' }};"
    >
        <!-- 这里放对应卡片的内容 -->
        {% if section.id == 'diamonds' %}
            钻石卡片的内容...
        {% elif section.id == 'clubs' %}
            梅花卡片的内容...
        {% elif section.id == 'hearts' %}
            红桃卡片的内容...
        {% elif section.id == 'spades' %}
            黑桃卡片的内容...
        {% endif %}
    </div>
{% endfor %}

这样一来，代码复用性拉满，以后要新增卡片类型，只需要在card_sections列表里加一项就行，不用动HTML和JS，非常适合Django的开发模式～

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