How to make a jQuery Horizontal Tab that loads the page once

Question

I want a jQuery horizontal tab pane (screenshot below) where clicking on a tab loads an external page in the div but where clicking on it after it is loaded does not load the page again.

There are 7 tabs Wall, Latest, Discussion, Poll, Club Message, Create.

A demo can be seen here http://www.web-shine.in/tabs/

I want the TAB to load the page once, and next time the user clicks on it, it should show the page from browser cache, not from the server.

What is the best way to code this?

Answer 1

Try something like this:

var cache = {};

function loadTab(tabObj) {
    if(!tabObj || !tabObj.length){ return; }
    $(containerId).fadeOut(100);

    var target = tabObj.attr('href');

    if (cache[target] !== undefined) {
        $(containerId).html(cache[target]);
        $(containerId).slideDown('medium');
        $(containerId).fadeIn('slow');
    } else {
        $(containerId).load(tabObj.attr('href'), function()
        {
            cache[target] = $(containerId).html();
            $(containerId).slideDown('medium');
            $(containerId).fadeIn('slow');
        });
    }
}