Django如何从views.py渲染accounts.html页面的指定tab标签内容

你使用的是Bootstrap Tab组件，默认显示哪个tab由对应元素的active/show类控制，Django本身不能直接通过render方法的参数指定锚点，需要通过以下两种方案实现：

方法1：后端传递激活参数（推荐，兼容性更好） #

第一步：修改视图函数 #

修正render方法的传参逻辑，给模板传递active_tab变量指定要默认激活的tab ID：

def fun(request):
    # 你的业务逻辑
    # 传入要默认激活的tab ID，不需要加#前缀
    return render(request, 'account.html', {"active_tab": "account-connections"})

第二步：修改导航链接的激活判断 #

替换原有的硬编码active类，用模板语法动态判断：

<div class="list-group list-group-flush account-settings-links">
    <a class="list-group-item list-group-item-action {% if active_tab == 'account-general' or not active_tab %}active{% endif %}" data-toggle="list"
       href="#account-general">General</a>
    <a class="list-group-item list-group-item-action {% if active_tab == 'account-connections' %}active{% endif %}" data-toggle="list"
       href="#account-connections">Connections</a>
    <a class="list-group-item list-group-item-action {% if active_tab == 'account-change-password' %}active{% endif %}" data-toggle="list"
       href="#account-change-password">Change password</a>
    <a class="list-group-item list-group-item-action {% if active_tab == 'account-delete-user' %}active{% endif %}" data-toggle="list"
       href="#account-delete-user">Delete Account</a>
</div>

第三步：修改Tab内容区域的激活判断 #

同样替换硬编码的active show类：

<div class="tab-content">
    <div class="tab-pane fade {% if active_tab == 'account-general' or not active_tab %}active show{% endif %}" style="overflow-y:scroll; height:450px;"
         id="account-general">
        {% include 'EditProfile.html' %}
    </div>
    <div class="tab-pane fade {% if active_tab == 'account-connections' %}active show{% endif %}" id="account-connections">
        {% include 'connections.html' %}
    </div>
    <div class="tab-pane fade {% if active_tab == 'account-change-password' %}active show{% endif %}" id="account-change-password">
        {% include 'change_password.html' %}
    </div>
    <div class="tab-pane fade {% if active_tab == 'account-delete-user' %}active show{% endif %}" id="account-delete-user">
        {% include 'delete_user.html' %}
    </div>
</div>

方法2：前端读取URL锚点自动激活（无需修改后端逻辑） #

如果不想改动后端代码，可以直接在页面底部加一段JS，页面加载时自动读取URL锚点激活对应tab：

document.addEventListener('DOMContentLoaded', function() {
    if (window.location.hash) {
        // 激活对应导航链接
        const targetTab = document.querySelector(`.account-settings-links a[href="${window.location.hash}"]`);
        if (targetTab) {
            // 移除所有原有激活状态
            document.querySelectorAll('.account-settings-links a').forEach(item => item.classList.remove('active'));
            document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active', 'show'));
            // 给当前选中tab添加激活状态
            targetTab.classList.add('active');
            document.querySelector(window.location.hash).classList.add('active', 'show');
        }
    }
});

使用该方法时，你只需要访问/你的页面路由#account-connections就会自动显示对应tab。

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