Bootstrap Tab导航

Question

我使用了带有3个标签的导航。 Tab内容的第一部分和第三部分工作正常。问题是，当我将任何内容放在选项卡的第二部分内时，第三个选项卡的内容也开始显示在第二个选项卡内容区域中。 我不明白为什么!! 请帮忙。

<ul class="nav nav-pills nav-justified">
    <li class="active">
      <a href="#home" data-toggle="tab">a</a>
    </li>
    <li><a href="#notify" data-toggle="tab">b</a></li>
    <li><a href="#about" data-toggle="tab">c</a></li>
</ul>


 <div class="tab-content">
    <!--  Part 1 Tab Content-->
      <div class="tab-pane fade in active" id="home">
        <table>
           <!-- table Content --> 
        </table>
      </div>

     <!--  Part 2 Tab Content -->
      <div class="tab-pane fade" id="notify">
        <table>
           <!-- table Content --> 
        </table>
      </div>

     <!--  Part 3 Tab Content -->
      <div class="tab-pane fade" id="about">
            <!-- about Content --> 
      </div>
   </div>