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

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?

Use the one() function.

Ex:

$("#foo").one("click", function() {
  alert("click can only be done once.");
});

UPDATE

If you are trying to cache the Ajax response so that subsequent Ajax requests that match the original Ajax options will return the cached response instead of making a new call then i highly recommend using this excellent jQuery plugin http://plugins.jquery.com/project/ajax-cache-response

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

All you need to do is put this sample inside an AJAX call:

http://jqueryui.com/demos/tabs/#manipulation

Try making your AJAX call in the "show" event of the tabs. This should only fire, when a tab is shown (i.e. when the selected tab changes).

http://docs.jquery.com/UI/Tabs#event-show

I'm sorry if i got it wrong but;

$('#tabs').tabs({cache: true});

It's enough.