Question

我想点击链接＆＃34;忘记密码？＃34;

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

我不希望显示标签。所以我只想在点击“＃34;忘记密码？”时查看该窗格？＆＃34;链接。我想我可以通过隐藏选项卡来实现这一点，但逻辑仍然存在。我相信我也可以在不使用标签的情况下实现这一点，但我不知道该怎么做。

的jsfiddle：

JS：

$(document).ready(function() {
    var join_btn = document.getElementById("join-btn"),
        signin_btn = document.getElementById("signin-btn"),
        reset_password_link = document.getElementsByClassName("reset-password-link")[0];

    join_btn.addEventListener("click", joinSelected);
    signin_btn.addEventListener("click", signInSelected);
    reset_password_link.addEventListener("click", resetPasswordSelected);

    function joinSelected() {
        $('[href="#signup-pane"]').trigger('click');
    }
    function signInSelected() {
        $('[href="#signin-pane"]').trigger('click');
    }
    function resetPasswordSelected() {
        $('[href="#reset-password-pane"]').trigger('click');
    }


});

HTML：

  <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>

Answer 1

您可以使用bootstrap X.bs.tab events显示/隐藏标签：

$('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();
});

JSFiddle

或者您可以将表单包装成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>

脚本：

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

JSFiddle

单击链接时查看引导窗格

1 个答案: