javascript - 尝试在单击单独的按钮 Bootstrap 时更改模式中的导航选项卡事件类

Question

我在模式中有导航选项卡，如图所示。我正在使用 meteor 框架。

这是注册按钮的模式链接(还有另一个名为“登录”的按钮链接到相同的模式):

<button class="btn btn-primary full-width center-text" data-toggle="modal" id="signUpModalButton" data-target="#signUpModal">SIGN UP</button>

如果从注册按钮调用模型，我希望模式中的注册选项卡处于事件状态如果从登录按钮调用模型，我希望模式中的登录选项卡处于事件状态

<div class="modal autoModal" id="signUpModal" tabindex="-1" data-keyboard="false"
       role="dialog" aria-labelledby="signUpModalLabel" aria-hidden="true">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-body">
                  <!-- Nav tabs -->
                  <ul class="nav nav-tabs" role="tablist" id="signUpLogInTabs">
                    <li class="{{if clicked sign up this should say active"><a href="#signUp" role="tab" data-toggle="tab">SIGN UP</a></li>
                    <li class="{{if clicked login in this should say active}}"><a href="#login" role="tab" data-toggle="tab">LOG IN</a></li>
                  </ul>
              </div>
          </div>
      </div>
  </div>

Answer 1

您可以简单地在每个按钮的点击上添加或删除类:

$('#signUpModalButton')
  .on('click', function() {
      $('li:first-child').addClass('active');
  });
$('#logInButton')
  .on('click', function() {
      $('li:last-child').addClass('active');
  });