如何记住使用jQuery.cookies和自定义jQuery标签代码的活动标签？

Question

I have written this code to make quick tabs. I need a way to remember active tab after refreshing page.

Here is my basic HTML code:

<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>

I use rel relations to display the correct tab with this code:

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();
    });
});

How can I use jQuery cookies to remember active tab?

Answer 1

Just create/update the cookie in your click function

$.cookie('active_tab', rel);

You can then easily read the active tab from the cookie in your ready function and do whatever you want with CSS or alike.

Answer 2

Look at this question: How to set/unset cookie with jQuery? . You can use jquery-cookie plugin for easy manipulate with cookies. On document ready read rel from cookies and set correct tab. On click event just save rel in cookies.