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 th

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