时间戳

首页 > 解决方案 > 如何隐藏 Bootstrap 选项卡内容？

jquery - 如何隐藏 Bootstrap 选项卡内容？

问题描述

在我的 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。我只有一个模板和一条路线。

标签： jqueryember.jsbootstrap-4

解决方案

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

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

但是，使用 ember 本身可以很容易地完成一个简单的选项卡导航。特别是如果你使用ember-truth-helpers！

您可以在标签中使用 simple 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);
  }
}

这是实现此解决方案的一个小技巧。

推荐阅读