我正在使用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实现此目的?
我在此答案中找到了解决方案。
<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类,该类存在于我的所有选项卡中。它不必完全是“ tab-pane”,您可以使用自己的类-“ foo”或“ bar”。这是一个很好且简单的解决方案,因为不需要外部库即可实现此目的。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句