Question

I have created my own tabs with hyperlinks and divs. im placing them within the sidebar.

im using jquerys .show() and hide() on relevant divs when a hypelink is clicked.

its working fine, however, i would like the last link/tab clicked to be remembered across the site as the user navigates.

how can i do this?

Answer 1

Your best bet would be to use a cookie to store the name of the active tab. Then, on page load, check the cookie with JS and use this as the basis for showing the correct tab and hiding the others.

I would recommend the jQuery cookie plugin for setting and reading cookies:
http://plugins.jquery.com/project/Cookie

Your code may look something like this (quick sketch, so may not be free of syntax errors):

MARKUP

<ul id="tabs">
  <li id="tab-a">First tab</li>
  <li id="tab-b">Second tab</li>
  <li id="tab-c">Third tab</li>
</ul>

JAVSCRIPT

//On Window load:
if ($.cookie('activetab')) {
  var activetabId = $.cookie('activetab');
  $('#tabs li').removeClass('active');
  $('#'+activetabId).addClass('active');
}

//On tab click
$('#tabs li')click(function(){
 var id =  $(this).attr('id');
 $.cookie('activetab',id);
});