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

我使用rel relations来显示正确的选项卡，代码如下：

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

$.cookie('active_tab', rel);

然后，您可以轻松地在您的就绪函数中读取cookie中的活动选项卡，并使用CSS或类似方法做任何您想做的事情。

Answer 2

看看这个问题：How to set/unset cookie with jQuery?。您可以使用jquery-cookie插件来轻松操作cookies。在document ready上，从cookies中读取rel并设置正确的选项卡。在click event上，只需将rel保存在cookies中。