Bootstrap消失的选项卡修复将关闭所有活动的选项卡

Question

我正在使用Bootstrap tabs disappear after clicking onto another tab

上一个答案中的代码

以下是摘要：

    $(document).off('click.tab.data-api');
    $(document).on('click.tab.data-api', '[data-toggle="tab"]', function (e) {
        e.preventDefault();
        var tab = $($(this).attr('href'));
        var activate = !tab.hasClass('active');
        $('div.tab-content>div.tab-pane.active').removeClass('active');
        $('ul.nav.nav-tabs>li.active').removeClass('active');
        if (activate) {
            $(this).tab('show')
        }
    });

它可以正常工作，但是，我在页面上有4个单独的标签部分（每个标签部分都有唯一的ID），现在单击任何标签会关闭所有4个“活动”标签并中断页面格式。

是否有一种解决方法，可以按ID分别定位选项卡部分？

这是我正在使用的标准引导HTML标签：

<div class="container">
  <h2>Example (using standard nav-tabs)</h2>
</div>

<div id="UniqueID" class="container">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#1" data-toggle="tab">Overview</a>
    </li>
    <li><a href="#2" data-toggle="tab">Without clearfix</a>
    </li>
    <li><a href="#3" data-toggle="tab">Solution</a>
    </li>
  </ul>

  <div class="tab-content ">
    <div class="tab-pane active" id="1">
      <h3>Content 1</h3>
    </div>
    <div class="tab-pane" id="2">
      <h3>Content 2</h3>
    </div>
    <div class="tab-pane" id="3">
      <h3>Content 3</h3>
    </div>
  </div>
</div>