如何使用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即可。