jquery tab cookie ...？

Question

Hyは、

私は舞タブの次のコードを持っている...

$(document).ready(function() { 

    $("#continut_right div.tab").hide(); 
    $("#continut_right div.tab:first-child").show(); 

    $("#navigatie_left ul li").click(function() { 
     var id_tab = $(this).attr("id"); 
     $("#continut_right div.tab").hide(); 
     $("#continut_right").children("#" + id_tab).show(); 
    }); 

とマークアップは次のようなものです：

<div id="continut_right"> 
    <!-- tab 1 -->  
    <div class="tab" id="id1"> 
    content ... bla bla bla 
    </div> 
</div> 

および変更するには、タブをトリガメニュー：

<div id="navigatie_left"> 
    <a style="text-decoration: none; color:#000; font-family:Arial; font-size:15px; font-weight:bold;" href="<?php echo $_SERVER['PHP_SELF']; ?>">[ REFRESH ]</a> 
     <br /><br /> 
     <ul> 
      <li id="id1">Categorii principale</li> 
      <li id="id2">Categorii secundare</li> 
      <li id="id2">Texte categorii secundare</li> 
     </ul> 
    </div> 

どのようにコードを実装できますか...どのタブが有効かを覚えていますなぜなら、フォームを作成してphp_selfに送信して、そのタブを開いたままにしておくと、変更が反映されるからです。

どうもありがとう

Answer 1

あなたは.appendTo（）さんJSON Cookie溶液の中に見ることができます。最後のアクティブなタブを格納して取得する簡単な方法を提供します。

$.cookie('activeTab', '3'); 

し、次いで、ページの読み込みにそれを取得：

$.cookie('activeTab'); //returns the set value 

$.cookie(string key, mixed value [, hash options ]) 

だからあなたがアクティブなタブのインデックスを格納することができ、次のよう

使い方はdocumentedです

これを実装する方法を見てみましょう：

$("#navigatie_left ul li").click(function() { 
    var id_tab = $(this).attr("id"); 
    $.cookie('activeTab', id_tab); // storing the new active tab 
    $("#continut_right div.tab").hide(); 
    $("#continut_right").children("#" + id_tab).show(); 
}); 

今、私たちは、自動的にページのロード時にタブを表示するようにするために：

$(document).ready(function() { 

    $("#continut_right div.tab").hide(); 
    $("#continut_right div.tab:first-child").show(); 
    // Which tab should we show on document.ready? 
    $("#continut_right").children("#" + $.cookie('activeTab')).show(); 

}); 

Answer 2

あなたは現在のタブのIDを格納するのにwindow.location.hashを使用することができます。タブIDのwindow.location.hashプロパティを読み取って$(document).ready()にあるコードを記述し、そのタブに自動的に切り替える必要があります。

例：

$(document).ready(function(){ 
    var id_tab = window.location.hash; 
    $("#continut_right div.tab").hide(); 
    if(id_tab){ 
     $("#continut_right").children(id_tab).show(); 
    }else{ 
     $("#continut_right div.tab:first-child").show(); 
    } 
    $("#navigatie_left ul li").click(function() { 
     var id_tab = $(this).attr("id"); 
     $("#continut_right div.tab").hide(); 
     $("#continut_right").children("#" + id_tab).show(); 
     window.location.hash = id_tab; 
    }); 

});