在 Django 中的 HTTP 发布请求后保留在选项卡上答案

【问题标题】：Remain on tab after HTTP post request in Django在 Django 中的 HTTP 发布请求后保留在选项卡上
【发布时间】：2015-02-28 12:24:50
【问题描述】：

我正在为客户的网站制作注册表（登录和注册）。

它看起来像这样： http://cssdeck.com/labs/twitter-bootstrap-tabbed-login-and-signup-register-forms-interface

我根据请求将其实现为两个选项卡，一个用于登录，另一个用于注册。

我使用 django 表单在服务器上创建表单并使用模板来捕获错误比如这样的：

                            {% if respErrors %}
                                <div class="alert alert-danger">    
                                    <strong>Errors:</strong>
                                    <ul>
                                        {% for error in respErrors %}
                                        <li class ="errorLi">{{ error }}</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            {% endif %} 
                            <p>                                 
                                <label for="{{loginForm.username.id_for_label}}" class="nonBool"> Your Email or Username </label>
                                {{ loginForm.username }}
                                {% if loginForm.username.errors %}
                                <div class="alert alert-danger">                                    
                                    {{ loginForm.username.errors }}
                                </div>
                                {% endif %}
                            </p>

我的问题是，当我在第二个选项卡上时，在这种情况下，注册并说我提交表单并且出现错误，views.py 返回如下：

return render(request,
                      "register.html",
                      {'loginForm': loginForm,
                       'signupForm' : signupForm })

问题是焦点回到第一个选项卡上，我怎样才能让第二个选项卡保持焦点，这样您就不必再次单击第二个选项卡来查看输入错误字段下的错误？

谢谢

【问题讨论】：

标签： django forms twitter-bootstrap http

【解决方案1】：

我建议您根据各自的错误更改以下div： <div class = "tab-pane fade" id="login">，<div class="tab-pane active in" id="create">。此外，您必须在各自的<li> 中设置class = 'active'。在您的特定情况下，请尝试以下操作：

第一：

<!-- language: lang-html -->
<ul class="nav nav-tabs">
     {% if signupForm.errors %}  
        <li><a href="#login" data-toggle="tab">Login</a></li>
        <!-- set the Create Account tab as active -->
        <li class = 'active'><a href="#create" data-toggle="tab">Create Account</a></li>
     {% else %}  
        <!-- set the Login tab as active -->
        <li class = 'active'><a href="#login" data-toggle="tab">Login</a></li>
        <li><a href="#create" data-toggle="tab">Create Account</a></li>
     {% endif %}
</ul>

然后在<div class="tab-pane active in" id="login"> 行中执行此操作：

<!-- language: lang-html -->
{% if signupForm.errors %}  
            <div class="tab-pane fade" id="login">
{% else %}  
            <!-- show the login tab -->
            <div class="tab-pane active in" id="login">
{% endif %}

最后，在<div class="tab-pane fade" id="create"> 行中执行此操作：

<!-- language: lang-html -->
{% if signupForm.errors %}  
            <!-- show the create account tab -->
            <div class="tab-pane active in" id="create">
{% else %}  
            <div class="tab-pane fade" id="create">
{% endif %}

注意：请忽略  行，我是 Stackoverflow 新手，不知道如何为我的答案指定 html sintax。

【讨论】：

太棒了，谢谢@caroso1222