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?