引导选项卡的多个药丸答案

【问题标题】：Multiple pills for bootstrap tabs引导选项卡的多个药丸
【发布时间】：2017-02-03 16:11:49
【问题描述】：

我的 html 页面上有一个引导选项卡。我想为标签设置多个药丸，当我更改标签时，它应该更改多个药丸

这是我的html

<div class="countries">
     <a href="#first" role="tab" data-toggle="tab">country</a>
</div>

<ul class="nav nav-tabs" role="tablist">
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane" id="first">
            <div class="col-sm-12 col-xs-12 detailTable">
                {{--contents 1 --}}
            </div>
        </div>
    </div>
</ul>

<ul class="nav nav-tabs" role="tablist">
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane" id="first">
            <div class="col-sm-12 col-xs-12 detailTable">
                {{--contents 2 --}}
            </div>
        </div>
    </div>
</ul>


<script>
    $(".countries a").click(function () {

        $(this).tab('show');
    });
</script>

【问题讨论】：

不清楚你在问什么，请解释你真正想要达到的目标。

标签： jquery html twitter-bootstrap

【解决方案1】：

你可以这样做：

创建指向选项卡的链接并将它们隐藏在 CSS 中。
点击您的链接，使用此隐藏链接打开两个选项卡。

HTML：

<div class="countries">
  <a href="#">country</a>
</div>
<a href="#first" role="tab" data-toggle="tab">country</a>
<a href="#second" role="tab" data-toggle="tab">country</a>
<ul class="nav nav-tabs" role="tablist">
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="first">
      <div class="col-sm-12 col-xs-12 detailTable">
        {{--contents 1 --}}
      </div>
    </div>
  </div>
</ul>

<ul class="nav nav-tabs" role="tablist">
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="second">
      <div class="col-sm-12 col-xs-12 detailTable">
        {{--contents 2 --}}
      </div>
    </div>
  </div>
</ul>

JS：

$(".countries a").click(function(e) {
  e.preventDefault();
  $("[href='#first']").tab('show');
  $("[href='#second']").tab('show');
});

记住，一个页面上不能有两个具有相同 ID 的 div（这是无效的 HTML）。

CODEPEN

【讨论】：