Question

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

Answer 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）。

用于引导标签的多个药丸

1 个答案:

CODEPEN