Question

当我点击Join按钮或sign in按钮时，我希望我的标签正确关联。目前，当点击join按钮时，li标记id="signin-tab"始终包含class="active"，id="signin-pane"标记为active好。我以为我的函数joinIsSelected会处理这个问题，但它没有这样做。即使我点击active按钮，该标签仍在Sign in标签上Join。只有当我点击Sign in标签或Sign in按钮

时才会激活它

这是一个jsfiddle：

http://jsfiddle.net/s5vcx0we/

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

JS：

var join_btn = document.getElementById("join-btn"),
        signin_btn = document.getElementById("signin-btn"),
        signin_tab = document.getElementById("signin-tab"),
        new_account_tab = document.getElementById("new-account-tab"),
        signin_pane = document.getElementById("signin-pane"),
        signup_pane = document.getElementById("signup-pane"),
        reset_password_pane = document.getElementById("reset-password-pane");

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

    function joinSelected() {
        $(new_account_tab).addClass("active");
        $(signup_pane).addClass("active");
        $(signin_pane).removeClass("active");
        $(signin_tab).removeClass("active");
        $(reset_password_pane).removeClass("active");

    }

    function signInSelected() {
        $(new_account_tab).removeClass("active");
        $(signup_pane).removeClass("active");
        $(signin_pane).addClass("active");
        $(signin_tab).addClass("active");
        $(reset_password_pane).removeClass("active");
    }

Answer 1

这是你的错误。

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

您正在执行这些功能，而不是仅仅传递对它们的引用，这些引用具有不可预测的结果，表现为您遇到的错误。

这样做

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

Answer 2

您的代码的主要问题已在另一个答案中解释。

但是，这只是一个部分修复，因为当你点击模态中的任何标签按钮时，所有标签内容（相应的标签除外）都将被隐藏。
标签内容不会被取消隐藏＆＃34;然后单击自定义链接时（除非单击选项卡按钮，否则它将保持隐藏状态）。

我展示了另一种更简单的方法来实现这一点，因为混合纯Javascript和jQuery没有明显的理由：

$(document).ready(function() {
    $("#join-btn").click(joinSelected);
    $("#signin-btn").click(signInSelected);

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

JSFiddle

另一种方式：

替换自定义按钮data属性，添加相应的标签href和自定义类：

<li><a href="#signin-pane" role="tab" data-toggle="tab" class="btn custom-toggle">Join Spark</a></li>
<li><a href="#signup-pane" role="tab" data-toggle="tab" class="btn custom-toggle">Sign in</a></li>

您的自定义按钮将切换选项卡，您只需使用jQuery触发模式：

$(document).ready(function() {
    $(".custom-toggle").click(function() {
        $('#modal').modal('show');
    });
});

JSFiddle

Answer 3

的JavaScript

$(document).ready(function() {

    $("#signin-btn").click(function(){
         $("#new-account-tab").removeClass("active");
        $("#signin-tab,#signin-pane").addClass("active");

    });
    $("#join-btn").click(function(){
        $("#new-account-tab,#signup-pane").addClass("active");
        $("#signin-tab").removeClass("active");
    });

});

Answer 4

设置eventlistener时不要“调用”函数。

您的代码：

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

应该是：

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

区别在于“joinSelected”和“signInSelected”后面的“（）”。加载页面时，可以调用这些函数，以便将登录选项卡设置为活动状态。之后，函数将无法正确调用，因此当您单击“加入”按钮时，选项卡不会更改。

活动类不会随javascript函数而改变

4 个答案: