尝试在单击按钮引导程序时更改模式中的导航选项卡活动类

时间:2015-06-02 15:57:05

标签: javascript jquery twitter-bootstrap meteor

我在模式中有导航标签,如图所示。我正在使用流星框架。

以下是注册按钮的模态链接(还有另一个名为login的按钮链接到同一模态):

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

1 个答案:

答案 0 :(得分:0)

您只需在每个按钮上添加或删除课程即可:

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