How to make a jQuery Horizontal Tab that loads the

问题:

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?

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

回答2:

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

回答3:

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

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

回答4:

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

回答5:

I'm sorry if i got it wrong but;

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

It's enough.