remember tab pressed across website

I have created my own tabs with hyperlinks and divs. im placing them with开发者_C百科in 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?

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

You can do that using a cookie (a piece of information kept in the browser for a specific site). That cookie could keep the currently opened tab.

There's a nice guide in http://www.electrictoolbox.com/jquery-cookies/

You could save the id of the tab which has been clicked last in the sidebar. e.g.:

$("#sidebar").data("lastClickedTab", $("#theTab")[0].id);