如何隐藏 Bootstrap 选项卡内容？

Question

在我的 Ember 应用程序中，我有一个带有导航丸的 Bootstrap 导航，每个导航丸在选项卡内容中显示不同的内容。 None 在单击之前处于活动状态。我想要的是使当前活动的选项卡（和药丸）在再次单击时停用，隐藏所有内容。

<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 我 强烈建议 你不要使用默认的 bootstrap JS 文件！这与 ember 一起使用效果不佳。但是，ember-bootstrap 为您提供了一个基于 API 的组件，用于 bootstrap 功能。

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

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

您可以为标签使用简单的 if：

<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，但在这里我使用了一个动作。

这是因为您的特殊功能：

What I want is to make the currently active tab (and pill) deactivate if clicked again, hiding all content.

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

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

和here is a twiddle implementing this solution.

如何隐藏 Bootstrap 选项卡内容？

How do I hide Bootstrap tab content?

jquery

ember.js

bootstrap-4