如何在 Angular 和 Bootstrap 中使用 "All" 选项卡进行选项卡导航？

Question

我正在使用 Bootstrap 和 Angular 并且我有以下 HTML:

<ul class="nav nav-tabs">
    <li class="active"><a data-target="#" data-toggle="tab">All</a></li>
    <li><a data-target="#tab1" data-toggle="tab">Tab 1</a></li>
    <li><a data-target="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
  <div id="tab1" class="tab-pane active">Yeahhh, this is Tab 1.</div>
  <div id="tab2" class="tab-pane active">Yup, yup, this is Tab 2.</div>
</div>

我想在单击 "All" 选项卡时同时显示 #tab1 和 #tab2。如何使用 Bootstrap 和 Angular 实现此目的？

Answer 1

我在这个 answer 中找到了解决方案。

<ul class="nav nav-tabs">
    <li class="active"><a data-target=".tab-pane" data-toggle="tab">All</a></li>
    <li><a data-target="#tab1" data-toggle="tab">Tab 1</a></li>
    <li><a data-target="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
    <div id="tab1" class="tab-pane active">Yeahhh, this is Tab 1.</div>
    <div id="tab2" class="tab-pane active">Yup, yup, this is Tab 2.</div>
</div>

我只是将 "All" 选项卡的数据目标设置为 CSS class，它出现在我所有的选项卡中。它不必完全是 'tab-pane'，您可以使用自己的 class - 'foo' 或 'bar'。这是一个很好且简单的解决方案，因为不需要外部库来实现这一点。

如何在 Angular 和 Bootstrap 中使用 "All" 选项卡进行选项卡导航？

How to make a tabs navigation with an "All" tab in Angular and Bootstrap?

twitter-bootstrap

angularjs

bootstrap-tabs

twitter-bootstrap-3