Flask网站URL锚点标签失效问题求助

我用Bootstrap模板开发用户资料设置页面，页面包含更新用户信息和修改密码两个表单，分别放在ID为account-general和account-change-password的div里，正常点击锚点可跳转至对应区域。但修改密码提交出错时，尽管重定向URL带有#account-change-password锚点，页面仍会跳转到account-general区域。已尝试更换浏览器、调整url_for的锚点参数，问题仍未解决。

相关代码 #

Flask路由代码 #

@views.route('user-profile/dashboard', methods=['GET', 'POST'])
@login_required
def dashboard():
    id=current_user.id
    user = User.query.get_or_404(id)
    update_user = Update_userinfo()
    update_password=Update_Password()
    if request.method =='POST':
        if update_user.validate_on_submit():
            if not update_user.errors:
                if User.query.filter_by(email=update_user.email.data).first(): 
                    if update_user.email.data == user.email:
                        user.firstname = update_user.firstname.data
                        user.lastname = update_user.lastname.data
                        user.email = update_user.email.data
                        db.session.commit()
                        flash("user info updated sucsessfully!", category="success")
                        return redirect(url_for('views.dashboard'))
                    else:
                        flash("This email is already in our database!", category="error")
                else:
                    user.firstname = update_user.firstname.data
                    user.lastname = update_user.lastname.data
                    user.email = update_user.email.data
                    db.session.commit()
                    flash("user info updated sucsessfully!", category="success")
                    return redirect(url_for('views.dashboard'))
            else:
                flash_errors(update_user)
           
        if update_password.validate_on_submit():
            if check_password_hash(user.password, update_password.old_password.data):
                hashed_pw = generate_password_hash(update_password.new_password.data, method="sha256")
                user.password = hashed_pw
                db.session.commit()

                flash('password changed Sucsessfully!', category='success')
                return redirect(url_for('views.dashboard'))
            else:
                flash("Wrong password! Try Again", category='error')
                return redirect(url_for("views.dashboard", _anchor ="account-change-password") )
        else:
            flash_errors(update_password) 
            return redirect(url_for("views.dashboard", _anchor ="account-change-password"))

    return render_template('dashboard.html', update_user=update_user, user=user, update_password=update_password)

HTML代码 #

<div class="container light-style flex-grow-1 container-p-y">

    <h4 class="font-weight-bold py-3 mb-4">
      Account settings
    </h4>

    <div class="card overflow-hidden">
      <div class="row no-gutters row-bordered row-border-light">
        <div class="col-md-3 pt-0">
          <div class="list-group list-group-flush account-settings-links">
            <a class="list-group-item list-group-item-action active" data-toggle="list" href="#account-general">General Settings</a>
            <a class="list-group-item list-group-item-action" data-toggle="list" href="#account-change-password">Change password</a>
          </div>
        </div>
        <div class="col-md-9">
          <div class="tab-content">

            <div class="tab-pane fade active show" id="account-general">
              <div class="card-body media align-items-center">
                <img src="{{ url_for('static', filename='profile pic.png')}}" alt="" class="d-block ui-w-80">
                <div class="media-body ml-4">
                  <label class="btn btn-outline-primary">
                    Upload new photo
                    <input type="file" class="account-settings-fileinput">
                  </label> &nbsp;
                  <button type="button" class="btn btn-default md-btn-flat">Reset</button>

                  <div class="text-light small mt-1">Allowed JPG, GIF or PNG. Max size of 800K</div>
                </div>
              </div>
              <hr class="border-light m-0">

              <div class="card-body">
                <form method="POST">
                <div class="form-group">
                  {{ update_user.hidden_tag() }}
                  {{ update_user.firstname.label(class="form-label") }}
                  {{ update_user.firstname(class="form-control", value=user.firstname) }}
                </div>
                <div class="form-group">
                  {{ update_user.lastname.label(class="form-label") }}
                  {{ update_user.lastname(class="form-control", value=user.lastname) }}
                </div>
                <div class="form-group">
                  {{ update_user.email.label(class="form-label") }}
                  {{ update_user.email(class="form-control", value=user.email) }}
                </div>
          
                <div class="text-right mt-3">
                {{update_user.submit(class="btn btn-secondary")}}
              </form>
                </div>
              </div>
            </div>

            <div class="tab-pane fade" id="account-change-password">
              <div class="card-body pb-2">
                <form method="POST">
                <div class="form-group">
                  {{ update_password.hidden_tag() }}
                    {{ update_password.old_password.label(class="form-label") }}
                    {{update_password.old_password(class="form-control")}}
                </div>
                <div class="form-group">
                  {{ update_password.new_password.label(class="form-label") }}
                  {{update_password.new_password(class="form-control")}}
                </div>
                <div class="form-group">
                  {{ update_password.new_password2.label(class="form-label") }}
                  {{update_password.new_password2(class="form-control")}}
                </div>
                <div class="text-right mt-3">
                  {{update_password.submit(class="btn btn-secondary")}}
                </form>
                  </div>
              </div>
            </div>

问题核心是Bootstrap Tab组件默认仅在页面初始加载时激活默认标签，锚点跳转只会滚动到对应元素，但不会触发Tab切换逻辑。同时当前代码未在重定向时保留激活状态，导致页面加载后仍默认激活account-general标签。

方法一：后端传递状态+前端动态切换 #

1. 修改Flask路由中的重定向代码，新增active_tab参数标记需要激活的标签：

# 旧密码错误时
return redirect(url_for("views.dashboard", _anchor="account-change-password", active_tab="password"))
# 密码表单验证失败时
return redirect(url_for("views.dashboard", _anchor="account-change-password", active_tab="password"))

2. 在HTML模板中，根据active_tab参数动态设置Tab的激活状态：

<!-- 左侧Tab链接 -->
<a class="list-group-item list-group-item-action {% if not request.args.get('active_tab') %}active{% endif %}" data-toggle="list" href="#account-general">General Settings</a>
<a class="list-group-item list-group-item-action {% if request.args.get('active_tab') == 'password' %}active{% endif %}" data-toggle="list" href="#account-change-password">Change password</a>

<!-- 右侧Tab面板 -->
<div class="tab-pane fade {% if not request.args.get('active_tab') %}active show{% endif %}" id="account-general">
<!-- 通用设置表单内容 -->
</div>
<div class="tab-pane fade {% if request.args.get('active_tab') == 'password' %}active show{% endif %}" id="account-change-password">
<!-- 修改密码表单内容 -->
</div>

方法二：前端通过锚点自动切换Tab #

在HTML页面末尾添加脚本，页面加载时读取URL锚点，自动切换对应Tab：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const hash = window.location.hash;
    if (hash === '#account-change-password') {
        // 切换Tab链接激活状态
        const generalTabLink = document.querySelector('a[href="#account-general"]');
        const passwordTabLink = document.querySelector('a[href="#account-change-password"]');
        generalTabLink.classList.remove('active');
        passwordTabLink.classList.add('active');
        
        // 切换Tab面板显示状态
        const generalPanel = document.querySelector('#account-general');
        const passwordPanel = document.querySelector('#account-change-password');
        generalPanel.classList.remove('active', 'show');
        passwordPanel.classList.add('active', 'show');
    }
});
</script>

额外优化：区分表单提交逻辑 #

当前两个表单均使用POST方法，未区分提交来源，可能导致验证逻辑冲突。建议给提交按钮添加name属性：

<!-- 通用设置提交按钮 -->
{{update_user.submit(class="btn btn-secondary", name="update_user")}}
<!-- 修改密码提交按钮 -->
{{update_password.submit(class="btn btn-secondary", name="update_password")}}

然后在Flask路由中先判断提交来源：

if request.method == 'POST':
    if 'update_user' in request.form:
        # 处理用户信息更新逻辑
        if update_user.validate_on_submit():
            # 原有更新逻辑
    elif 'update_password' in request.form:
        # 处理密码修改逻辑
        if update_password.validate_on_submit():
            # 原有密码修改逻辑

内容的提问来源于stack exchange，提问作者The Coffee Shop