0

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>

「すべて」タブをクリックしたときに#tab1と#tab2の両方を視覚化したいと考えています。Bootstrap と Angular でこれを達成するにはどうすればよいですか?

4

1 に答える 1

1

この回答で解決策を見つけました。

<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>

「すべて」タブのデータターゲットを、すべてのタブに存在する CSS クラスに設定しただけです。正確に「タブペイン」である必要はありません。独自のクラス「foo」または「bar」を使用できます。これを実現するために外部ライブラリは必要ないため、これは素晴らしくシンプルなソリューションです。

于 2015-03-31T12:29:30.893 に答える