我试图打开一个选择了特定选项卡的引导（5.2）模式。选项卡应该由在主页上单击哪个按钮（“登录”或“注册”）来确定。

我尝试了以前的解决方案，但它们大多使用旧版本的引导程序。

我对JavaScript非常熟悉，所以如果您的解决方案包括它，请像我五岁一样解释。

以下是我的HTML:

    <!-- Log In / Sign Up Buttons -->
    <div class="container">
        <div class="row">
            <div class="col">

              <!-- Sign Up Button -->
              <button id="signup-button" type="button" href="#pills-signup" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
                  Sign Up
              </button>

              <!-- Log In Button -->
              <button type="button" href="#pills-login" class="btn btn-outline-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
                Log In
              </button>

            </div>
        </div>
    </div>

    <!-- Log In Modal -->
    <div class="modal fade" id="login-signup-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
          
            <!-- Modal Body -->
              <div class="modal-body">

                <!-- Tab Headers -->
                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                  <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-login-tab" data-bs-toggle="pill" data-bs-target="#pills-login" type="button" role="tab" aria-controls="pills-login" aria-selected="true">Log In</button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-signup-tab" data-bs-toggle="pill" data-bs-target="#pills-signup" type="button" role="tab" aria-controls="pills-signup" aria-selected="false">Sign Up</button>
                  </li>
                </ul>

                <!-- Tab Content -->
                <div class="tab-content" id="pills-tabContent">

                  <!-- Log In Tab -->
                  <div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
                    <form method="POST">
                      <!-- form-label & form-control = bootstrap form layouts -->
                      {{ log_in_form.email.label(class="form-label") }}
                      {{ log_in_form.email(class="form-control") }}
                      <br>
                      {{ log_in_form.password.label(class="form-label")}}
                      {{ log_in_form.password(class="form-control") }}
                      <br>
                      {{ log_in_form.submit(class="btn btn-primary form-control") }}
                    </form>
                  </div>

                  <!-- Sign Up Tab -->
                  <div class="tab-pane fade" id="pills-signup" role="tabpanel" aria-labelledby="pills-signup-tab">
                    <form method="POST">
                      {{ sign_up_form.email.label(class="form-label") }}
                      {{ sign_up_form.email(class="form-control") }}
                      <br>
                      {{ sign_up_form.password.label(class="form-label")}}
                      {{ sign_up_form.password(class="form-control") }}
                      <br>
                      {{ sign_up_form.confirm_password.label(class="form-label")}}
                      {{ sign_up_form.confirm_password(class="form-control") }}
                      <br>
                      {{ sign_up_form.submit(class="btn btn-primary form-control") }}
                    </form>
                  </div>

                </div>
              </div>

              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

                </div>
              </div>

            </div>

          </div>
        </div>
      </div>

顺晟科技：

您可以利用引导事件。我认为javascript部分很短，所以基本上监听模式的事件（请参见bootstrap docs)，并获得对调用按钮的引用（请参见bootstrap docs)，该按钮首先具有一个属性。我们使用该属性并获得对该选项卡的引用。最后，我们使用tabs方法来显示正确的选项卡。