Как скрыть содержимое вкладки Bootstrap? - PullRequest
Новая
       7

Как скрыть содержимое вкладки Bootstrap?

0 голосов
/ 08 ноября 2018

В моем приложении Ember у меня есть навигация Bootstrap с nav-pills, каждый из которых отображает различный контент в виде табуляции. Ни один не активен, пока не нажата. Я хочу сделать так, чтобы активная в данный момент вкладка (и таблетка) деактивировалась при повторном нажатии, скрывая весь контент. 

<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. У меня есть только шаблон и маршрут.

1 Ответ

0 голосов
/ 08 ноября 2018

Во-первых, когда вы используете ember I , настоятельно рекомендуем , вы не используете JS-файл начальной загрузки по умолчанию! Это не очень хорошо сочетается с Ember. Однако есть 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);
  }
}

И - вот трюк, реализующий это решение .

...