Twitter bootstrap 引导选项卡导航

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

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

能否举例说明您正在添加的内容？你上面的代码很好。很好谢谢你的回复，我解决了，只是个小错误。。实际上，我正在创建一个包含三部分信息的联系人列表，选项卡1、2和3，选项卡1用于呼叫列表，选项卡2用于聊天，选项卡3用于联系人..诸如此类您能举个例子说明您正在添加的内容吗？你上面的代码很好。很好谢谢你的回复，我解决了，只是个小错误。。实际上，我正在创建一个联系人列表，其中包含三个部分的信息，选项卡1、2和3，选项卡1用于呼叫列表，选项卡2用于聊天，选项卡3用于联系人..仅此而已