ブートストラップタブのコンテンツを取得する方法

Question

私はブートストラップのタブでやっているFAQページ用の検索バーを作成しました。ボタンをクリックするとタブのコンテンツが表示されますが、コンテンツを検索するときは表示されません。ここで

$('#faq_search').on('keyup', function() { 

    var filter = $(this).val(); 
    if (filter.length > 2) { 

     $(".faq_cont_right ul li").each(function() { 
     $(this).removeClass('foo'); 
     if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
      $(this).show(); 

     } else { 

      $(this).show(); 
      $(this).addClass('foo'); 

     } 
     }); 

    } else { 
     $(".faq_cont_right ul li").each(function() { 
     $(this).removeClass('foo'); 
     }); 
    } 

    }); 

は私 plunker

です....私はdiv要素のidを照合して、（それが見えるように） inline-blockに noneからのdivの表示を設定することで、コンテンツを取得しようとしたが、それは他の問題を引き起こしました

Answer 1

が、それは動作します....あなたのsrcipt.jsを変更：

$(document).ready(function(){ 
     $('#faq_search').on('keyup',function(){ 

      var filter = $(this).val(); 
      if (filter.length > 2) { 

      // Loop through the comment list 
      $(".faq_cont_right ul li").each(function(){ 
       $(this).removeClass('foo'); 
       // If the list item does not contain the text phrase fade it out 
       if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
        //$(this).fadeOut(); 
        $(this).show(); 
        // Show the list item if the phrase matches and increase the count by 1 
       } else { 

        $(this).show(); 
        $(this).addClass('foo'); 

       } 
      }); 
      $(".tab-content>.active").each(function(){ 
       $(this).removeClass('foo'); 
       // If the list item does not contain the text phrase fade it out 
       if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
        //$(this).fadeOut(); 
        $(this).show(); 
        // Show the list item if the phrase matches and increase the count by 1 
       } else { 

        $(this).show(); 
        $(this).addClass('foo'); 

       } 
      }); 


} else{ 
    $(".faq_cont_right ul li").each(function(){ 
    $(this).removeClass('foo'); 
    }); 
    $(".tab-content>.active").each(function(){ 
    $(this).removeClass('foo'); 
    }); 
} 


     }); 
    }); 

Answer 2

がそれを手に入れた....単に $（文書）....試合結果が見つかったときにクリックイベントをトリガする必要がありました。準備完了（関数（）{ $（ '＃1 faq_search'）に（ 'keyUpイベント'、関数（）{

var filter = $(this).val(); 
    if (filter.length > 2) { 

    // Loop through the comment list 
    $(".faq_cont_right ul li").each(function() { 
     $(this).removeClass('foo'); 
     // If the list item does not contain the text phrase fade it out 
     if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
     //$(this).fadeOut(); 
     $(this).show(); 
     // Show the list item if the phrase matches and increase the count by 1 
     } else { 

     $(this).show(); 
     $(this).addClass('foo').trigger('click'); 

     } 
    }); 
    $(".tab-content>.active").each(function() { 
     $(this).removeClass('foo'); 
     // If the list item does not contain the text phrase fade it out 
     if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
     //$(this).fadeOut(); 
     $(this).show(); 
     // Show the list item if the phrase matches and increase the count by 1 
     } else { 

     $(this).show(); 
     $(this).addClass('foo'); 

     } 
    }); 


    } else { 
    $(".faq_cont_right ul li").each(function() { 
     $(this).removeClass('foo'); 
    }); 
    $(".tab-content>.active").each(function() { 
     $(this).removeClass('foo'); 
    }); 
    } 


}); 

}）。