0

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?

Eli
  • 14,537
  • 5
  • 56
  • 77
Ahmed Fouad
  • 2,683
  • 10
  • 27
  • 54

2 Answers2

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.

DrColossos
  • 11,696
  • 2
  • 40
  • 64
0

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.

Community
  • 1
  • 1
webdeveloper
  • 16,626
  • 3
  • 46
  • 47