如何隐藏 Bootstrap 选项卡内容？

Question

在我的 Ember 应用程序中，我有一个带有 nav-pills 的 Bootstrap nav，每个在选项卡内容中显示不同的内容。在单击之前，没有一个是活动的。我想要的是使当前活动的标签（和药丸）在再次单击时停用，隐藏所有内容。

<div class="col-sm-9 nav-pills">
  <ul class="nav nav-pills">
    <li><a class="tab-toggle" data-toggle="pill" href="#special-instructions">Special Instructions</a></li>
    <li><a class="tab-toggle" data-toggle="pill" href="#job-details">Job Details</a></li>
    <li><a class="tab-toggle" data-toggle="pill" href="#alerts">Alerts</a></li>
    <li><a class="tab-toggle" data-toggle="pill" href="#toolbox">Toolbox Talk</a></li>
    <li><a class="tab-toggle" data-toggle="pill" href="#load-cell">Load Cell</a></li>
  </ul>
</div>

<div class="tab-content job-info">
  <div id="special-instructions" class="tab-pane fade in">
    <div class="row spacer-mb-1"></div>
    Special Instructions
  </div>
  <div id="job-details" class="tab-pane fade in">
    <div class="row spacer-mb-1"></div>
    Job Details
  </div>
  <div id="alerts" class="tab-pane fade in">
    <div class="row spacer-mb-1"></div>
    Alerts
  </div>
  <div id="toolbox" class="tab-pane fade in">
    <div class="row spacer-mb-1"></div>
    Toolbox Talk
  </div>
  <div id="load-cell" class="tab-pane fade in">
    <div class="row spacer-mb-1"></div>
    Load Cell
  </div>
</div>

我是 Ember 新手，不知道如何在其中包含 jQuery。我只有一个模板和一个路由。

Answer 1

首先，当您使用 ember 时，我强烈建议您不要使用默认的引导 JS 文件！这与 ember 并不能很好地配合使用。但是，ember-bootstrap 为您提供了一个基于组件的 API，用于引导功能。

哦，jQuery 是 ember 本身的一部分，但是您可以为较新的 ember 版本禁用此功能。

不过，使用 ember 本身非常可以轻松实现简单的标签导航。特别是如果你使用ember-truth-helpers！

您可以在标签中使用简单的ifs：

<ul>
  <li role="button" onclick={{action 'activate' 'tab1'}}>Tab1</li>
  <li role="button" onclick={{action 'activate' 'tab2'}}>Tab2</li>
</ul>

{{#if (eq currentTab 'tab1')}}
  <div>
    Tab 1
  </div>
{{/if}}

{{#if (eq currentTab 'tab2')}}
  <div>
    Tab 2
  </div>
{{/if}}

虽然我通常会使用onclick={{action (mut currentTab) 'tab1'}} 来激活tab1，但在这里我使用了一个动作。

这是因为您的特殊功能：

如果再次单击，我想要使当前活动的选项卡（和药丸）停用，隐藏所有内容。

现在很容易在该操作中实现：

activate(name) {
  if(this.currentTab === name) {
    this.set('currentTab', '');
  } else {
    this.set('currentTab', name);
  }
}

还有here is a twiddle implementing this solution。