Javascript 单击链接时查看引导窗格

当我点击“忘记密码”链接时，我希望能够查看我的窗格

现在我所做的是为特定窗格创建了一个选项卡。单击选项卡或链接时，我可以查看窗格。我创建了一个JS函数，当我单击“忘记密码”链接时，它将“单击”选项卡并显示窗格

我不希望显示该选项卡。因此，我只想在单击“忘记密码”链接时查看窗格。我想我可以通过隐藏标签来实现这一点，但逻辑仍然存在。我相信我也可以做到这一点，不使用标签，但我不知道如何做到这一点

JSFIDDLE：

JS:

HTML:

{%csrf_令牌%}
{%csrf_令牌%}

您可以使用引导显示/隐藏选项卡：

---

或者，您可以将表单包装到一个div中，在另一个div中创建另一个表单，并在单击时切换这些div：

<div role="tabpanel" class="tab-pane fade in" id="signin-pane">
    <div class="login-tab-container">
        <form>
            ... login fields ...
        </form>
    </div>
    <div class="login-tab-container" style="display:none;">
        <form>
            ... reset password field ...
        </form>
    </div>
    <p>
        <a href="#" class="reset-password-link">Forgot your password?</a>
    </p>
</div>

  <nav class="navbar nav-default navbar-fixed-top">
    <div class="container">
      <ul class="navbar-left">
        <li><a>LOGO</a></li>
      </ul>
      <ul class="logged-out-nav nav navbar-nav navbar-right">
        <li><a id="join-btn" data-toggle="modal" data-target="#modal" class="btn">Join Spark</a></li>
        <li><a id="signin-btn" data-toggle="modal" data-target="#modal" class="btn">Sign in</a></li>
      </ul>
    </div>
  </nav>

  <!-- Modal -->
  <div class="modal fade" id="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <!-- tabs -->
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" id="signin-tab"><a href="#signin-pane" role="tab" data-toggle="tab">Sign in</a></li>
            <li role="presentation" id="new-account-tab"><a href="#signup-pane" role="tab" data-toggle="tab">New Account</a></li>
            <li role="presentation" id="reset-password-tab"><a href="#reset-password-pane" role="tab" data-toggle="tab">test</a></li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in" id="signup-pane">
              <form class="signup-form" method="post">
                {% csrf_token %}
                <input id="signup-firstname" type="text" placeholder="First Name">
                <input id="signup-lastname" type="text" placeholder="Last Name">
                <input id="signup-email" type="email" placeholder="Email">
                <input id="signup-password" placeholder="Password">
                <input id="signup-confirm-password" placeholder="Confirm Password">
              </form>
            </div>
            <div role="tabpanel" class="tab-pane fade in" id="signin-pane">
              <form class="signin-form" method="post">
                {% csrf_token %}
                <input id="signin-email" type="email" placeholder="Email">
                <input id="signin-password" type="password" placeholder="Password">
              </form>
              <p>
                <a href="#reset-password-pane" class="reset-password-link">
                  Forgot your password?
                </a>
              </p>
            </div>
            <div role="tabpanel" class="tab-pane fade in" id="reset-password-pane">
              <input id="forgot-email" type="email" placeholder="Email">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    $("#reset-password-pane, #reset-password-tab").show();
}).not('#reset-password-tab a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    $("#reset-password-pane, #reset-password-tab").hide();
});

<div role="tabpanel" class="tab-pane fade in" id="signin-pane">
    <div class="login-tab-container">
        <form>
            ... login fields ...
        </form>
    </div>
    <div class="login-tab-container" style="display:none;">
        <form>
            ... reset password field ...
        </form>
    </div>
    <p>
        <a href="#" class="reset-password-link">Forgot your password?</a>
    </p>
</div>

$(".reset-password-link").click( function() {
    $('.login-tab-container').slideToggle(200);
    $.trim($(this).text()) === 'Close' ? $(this).text('Forgot your password?') : $(this).text('Close')
});