jquery - タブを前後に切り替えると Ajax 検索結果が消える

Question

奇妙な問題があります。以下のように2つのタブが配置されています。もう 1 つは静的な html コードを含み、もう 1 つは ajax 検索によって埋められます。"project-search-results" タブがアクティブである限り、検索はうまく機能しますが、そうでない場合は何も起こりません。これは問題ではありませんが、問題は、ユーザーが別のタブをクリックすると、検索結果が消えて静的コンテンツが再び表示されることです。問題は、それらを固執させる方法はありますか? 違いが生じる場合に備えて、サーバー側で Django を使用しています。

ここから自家製のタブコードを使用しています（これも下に貼り付けられています）： http://papermashup.com/simple-jquery-tabs/ 問題は、「非表示」と「表示」がかなりうまくいくことだと思います思った以上。

<div class="span6 main-content" id="tabs">
    <ul class="nav nav-tabs">
     <li><a href="#our-goals">Our Goals</a></li>
     <li><a href="#project-search-results">Search Results</a></li>
   </ul>
  <div id="our-goals">
    goals here
  </div>
  <div id="project-search-results">
    search
    <!-- filled with ajax -->
  </div>
</div>

タブ js コード

$(document).ready(function(){
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs ul li:first').addClass('active');

    $('#tabs ul li a').click(function(){
    $('#tabs ul li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('#tabs div').hide();
    $(currentTab).show();
    return false;
});
});