为什么tab1内容​​出现在其他标签中？

Question

我正在使用引导标签。问题是当其他选项卡内容也出现时，tab1内容​​总是出现。你知道问题出在哪里吗？你知道为什么tab1内容​​总是出现在其他标签内容中而不是只显示正确的标签内容吗？

示例：https://jsfiddle.net/2xahspct/

HTML：

<ul class="nav nav-pills" role="tablist">
  <li class="">
    <a class="nav-link active" href="#tab1" data-toggle="tab" role="tab">
      <span class="d-lg-inline-block">tab1</span>
    </a>
  </li>
  <li class="disabled">
    <a class="nav-link" href="#tab2" data-toggle="tab" role="tab">
      <span class="d-lg-inline-block">tab2</span>
    </a>
  </li>
  <li class="disabled">
    <a class="nav-link" href="#tab3" data-toggle="tab" role="tab">
      <span class="d-lg-inline-block">tab3</span>
    </a>
  </li>
</ul>

<!-- tabs -->
<div class="tab-content bg-white" id="myTabContent">
  <div class="tab-pane fade show active clearfix" id="tab1" role="tabpanel"
       aria-labelledby="home-tab">
    tab1
  </div>
</div>

<div class="tab-pane clearfix fade" id="tab2" role="tabpanel"
     aria-labelledby="contact-tab">
  tab2

  <div class="d-flex mb-3">
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link active border" href="#tab2-1" data-toggle="tab"
           role="tab">tab2-1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link border" href="#tab2-2" data-toggle="tab"
           role="tab">tab2-2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link border" href="#tab2-3" data-toggle="tab"
           role="tab">tab-2-3</a>
      </li>
    </ul>
  </div>

  <div class="tab-content bg-white" id="myTabContent">
    <div class="tab-pane fade active show clearfix" id="tab2-1" role="tabpanel"
         aria-labelledby="home-tab">

      tab2-1
    </div>

    <div class="tab-pane fade show clearfix" id="tab2-2" role="tabpanel"
         aria-labelledby="home-tab">
      tab 2-2
    </div>

    <div class="tab-pane fade show clearfix" id="tab2-3" role="tabpanel"
         aria-labelledby="home-tab">
      tab2-3
    </div>
  </div>
</div>


<div class="tab-pane clearfix fade" id="tab3" role="tabpanel"
     aria-labelledby="contact-tab">
  tab 3
  <div class="d-flex mb-3">
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link active border" id="tab3-1" href="#tab3-1"
           data-toggle="tab"
           role="tab">tab 3-1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link border" id="tab3-2" href="#tab3-2"
           data-toggle="tab" role="tab">tab 3-2</a>
      </li>
    </ul>
  </div>
  <div class="tab-content bg-white" id="myTabContent">
    <div class="tab-pane fade show active clearfix" id="tab3-1" role="tabpanel"
         aria-labelledby="home-tab">
      tab3-1
    </div>

    <div class="tab-pane fade show clearfix" id="tab3-2" role="tabpanel"
         aria-labelledby="home-tab">
      tab3-2
    </div>
  </div>
</div>