使用“淡入淡出”效果搜索Bootstrap选项卡会弄乱结果

Question

我已经在每个Bootstrap选项卡中插入了表格，并且有一个搜索栏，如果有匹配项，则返回该选项卡和表格。如果我对任何一个选项卡使用“淡入”属性，似乎会将搜索结果合并到一个选项卡中。

如果我删除“淡入淡出”，则搜索有效，但是当清除搜索栏时，它将最后一个选项卡设置为活动状态。

<div id = "s-cont">
<div class="container">

  <div class="text-center">
    <input type="text" class="form-control" placeholder="Search...">
  </div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist" id = "main-tab">
    <li role="presentation" class="active"><a href="#home" data-toggle="tab">Fruits</a></li>
    <li role="presentation"><a href="#Cars" data-toggle="tab">Cars</a></li>
    <li role="presentation"><a href="#pf" data-toggle="tab">Profile</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active fade in" id="home">
      <table class = "table">
          <thead>
             <tr>
               <th scope = "col"> Fave </th>
               <th scope = "col"> Less Fave </th>
               <th scope = "col"> Worst </th>
             </tr>
        </thead>
        <tbody>
             <tr>
               <td>Apple </td>
               <td>Banana</td>
               <td>Orange </td>
             </tr>
              <tr>
               <td>Grape</td>
               <td>Melon</td>
               <td>Waffle</td>
             </tr>
        </tbody>
           </table>      
    </div>
    <div role="tabpanel" class="tab-pane fade" id="Cars"><table class = "table">
          <thead>
             <tr>
               <th scope = "col"> Mike's </th>
               <th scope = "col"> Joe's </th>
               <th scope = "col"> Kim's </th>
             </tr>
        </thead>
        <tbody>
             <tr>
               <td>Civic </td>
               <td>Camry</td>
               <td>Rav4 </td>
             </tr>
           </table>
      </tbody> 
    </div>
    <div role="tabpanel" class="tab-pane fade" id="pf"><table class = "table">
          <thead>
             <tr>
               <th scope = "col"> Name </th>
               <th scope = "col"> First </th>
               <th scope = "col"> Last </th>
             </tr>
        </thead>
        <tbody> 
             <tr>
               <td>Joe Smith </td>
               <td>Joe</td>
               <td>Smith </td>
             </tr>
           </table>
        </tbody> 
    </div>
  </div>
</div>
</div>

JS代码

var tabLinks = $('.nav > li'),
  tabsContent = $('.tab-content > div > table >tbody'),
  tabContent = [],
  string,
  i,
  j;

for (i = 0; i < tabsContent.length; i++) {
  tabContent[i] = tabsContent.eq(i).text().toLowerCase();
  console.log(tabContent[i]);
}
$('input').on('input', function() {
  string = $(this).val().toLowerCase();
  for (j = 0; j < tabsContent.length; j++) {
    if (tabContent[j].indexOf(string) > -1) {
      tabLinks.eq(j).show();
      tabLinks.eq(j).find('a').tab('show');
    } else {
      tabLinks.eq(j).hide();
    }
  }
});

主要问题是，清除搜索栏后，该选项卡现在将多个选项卡显示为活动状态并显示。我不确定为什么它与“淡入淡出”效果冲突，因为当我删除它时，它似乎可以正常工作。