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

首先，当我使用余烬时，强烈推荐 ，您不会使用默认的Bootstrap JS文件！这与余烬一起不能很好地发挥作用。但是，ember-bootstrap可以为您提供用于引导功能的基于组件的API。

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

这是由于您的特殊功能

我想要的是使当前处于活动状态的选项卡（和药丸）在再次单击时停用，从而隐藏所有内容。

现在可以轻松地通过以下操作来实现：

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

还有here is a twiddle implementing this solution。

如何隐藏Bootstrap标签内容？

1 个答案: