如何将多选项卡模式重置为初始内容？

Question

我创建了一个多选项卡模式来处理我网站上的登录和注册内容。 这是模态的代码：

<div class="modal fade" id="signInModal" tabindex="-1" role="dialog" aria-labelledby="signInModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="signInModalLabel">Enter the site</h4>
      </div>
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#loginTab">Login</a></li>
        <li><a data-toggle="tab" href="#registerTab">Register</a></li>
      </ul>
      <div class="tab-content">
        <div id="loginTab" class="tab-pane fade in active">
          <div class="modal-body">
            <form class="form-horizontal" id="loginForm">
              <div class="form-group">
                <label for="inputUsername" class="control-label col-xs-2">Username</label>
                <div class="col-xs-10">
                  <input type="text" class="form-control" id="inputUsername"required>
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-2">Password</label>
                <div class="col-xs-10">
                  <input type="password" class="form-control" id="inputPassword" required>
                </div>
              </div>
              <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                  <p class="text-danger" id="login-error"></p>
                </div>
              </div>
              <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                  <p id="forgotPass">Forgot password?</p>
                </div>
              </div>
            </form>

            <form class="form-horizontal" id="forgotPassForm">
              <p>Please fill-in your email address</p>
              <div class="form-group">
                <label for="inputForgotPass" class="control-label col-xs-2">E-mail</label>
                <div class="col-xs-10">
                  <input type="email" class="form-control" id="inputForgotPass" required>
                </div>
              </div>
              <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                  <p class="text-danger" id="forgot-error"></p>
                </div>
              </div>
            </form>

          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary" form="loginForm">Login</button>
            <button type="submit" class="btn btn-primary" form="forgotPassForm">Send</button>
          </div> 
        </div>
        <div id="registerTab" class="tab-pane fade">
          <div class="modal-body">
            <form class="form-horizontal" id="registerForm">
              <div class="form-group">
                <label for="inputNewUsername" class="control-label col-xs-2">Username</label>
                <div class="col-xs-10">
                  <input type="text" class="form-control" id="inputNewUsername" required>
                </div>
              </div>
              <div class="form-group">
                <label for="inputNewPassword" class="control-label col-xs-2">Password</label>
                <div class="col-xs-10">
                  <input type="password" class="form-control" id="inputNewPassword" required>
                </div>
              </div>
              <div class="form-group">
                <label for="inputNewPassword2" class="control-label col-xs-2">Password</label>
                <div class="col-xs-10">
                  <input type="password" class="form-control" id="inputNewPassword2" required>
                </div>
              </div>
              <div class="form-group">
                <label for="inputNewEmail" class="control-label col-xs-2">E-mail</label>
                <div class="col-xs-10">
                  <input type="email" class="form-control" id="inputNewEmail" required>
                </div>
              </div>
              <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                  <p class="text-danger" id="reg-error"></p>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary" form="registerForm">Register</button>
          </div>              
        </div>
      </div>
    </div>
  </div>
</div>

这是第一次出现的模态：

现在如果用户点击“忘记密码”链接，它会显示：

此时，如果用户关闭模式并重新打开它（不刷新页面），它会显示忘记密码表单，而不是最初的表单（除了重新加载之外，没有办法返回登录表单网站）。 我尝试了几种解决方案，例如this，但它不起作用。 如何解决这个问题？

提前谢谢你。

Answer 1

首先，我建议您在发送按钮的左侧添加一个取消按钮。单击取消按钮将返回原始登录表单。

使用取消按钮，以下应该可以工作：

$('#signInModal').on('hidden.bs.modal', function() { 
    // reset multi-tab modal to initial state 
    $(this).find('.nav-tabs a:first').tab('show');
    $('#cancelBtnId').click();    
}) ;

试试看，然后告诉我们:-)

Answer 2

引导模式有一些事件。其中之一是hide.bs.modal，它在hide 实例方法被调用时立即触发。所以你可以尝试这样的事情：

$("#signInModal").on("hide.bs.modal", function () {
    $("#signInModal .loginForm").show();
    $("#signInModal .forgotPassForm").hide();
});