如何使用jQuery.cookies和自定義jQuery選項卡代碼記住活動選項卡？

Question

我寫了這段代碼來製作快速標籤。我需要一種在刷新頁面後記住活動標籤的方式。

這裏是我的基本的HTML代碼：

<ul class="dashboard_tabs"> 
    <li><a href="#" rel="tab1">Tab 1</a></li> 
    <li><a href="#" rel="tab2">Tab 2</a></li> 
    <li><a href="#" rel="tab3">Tab 3</a></li> 
    <li><a href="#" rel="tab4">Tab 4</a></li> 
</ul> 

<div class="dashboard_body" id="tab1"> 

</div> 

<div class="dashboard_body" id="tab2"> 

</div> 

<div class="dashboard_body" id="tab3"> 

</div> 

<div class="dashboard_body" id="tab4"> 

</div> 

我用相對關係，與此代碼，以顯示正確的標籤：

jQuery(document).ready(function(){ 
    jQuery('.dashboard_body').css({display: 'none'}); 
    jQuery('.dashboard_tabs a:first').addClass('current'); 
    var rel = jQuery('.dashboard_tabs a.current').attr('rel'); 
    jQuery('#'+rel).show(); 

    jQuery('.dashboard_tabs a').click(function(){ 
     jQuery('.dashboard_tabs a').removeClass('current'); 
     jQuery('.dashboard_body').hide(); 
     jQuery(this).addClass('current'); 
     var rel = jQuery(this).attr('rel'); 
     jQuery('#'+rel).show(); 
    }); 
}); 

如何使用jQuery的cookies記住激活的標籤？

Answer 1

只需創建/在你點擊功能

$.cookie('active_tab', rel); 

然後，您可以輕鬆地從Cookie讀取您準備功能激活的標籤，做任何你想要的CSS或類似更新的cookie。

Answer 2

看看這個問題：How to set/unset cookie with jQuery?。您可以使用jquery-cookie插件輕鬆操作Cookie。在document ready從Cookie中讀取rel並設置正確的選項卡。在click event只需在Cookie中保存rel即可。