Cómo hacer una pestaña horizontal de jQuery que carga la página una vez

Quiero un panel de pestaña horizontal de jQuery (captura de pantalla a continuación) donde hacer clic en una pestaña carga una página externa en el div, pero donde hacer clic en ella después de cargarla no vuelve a cargar la página.

Hay 7 tabs Wall , Latest , Discussion , Poll , Club Message , Create .

http://i.stack.imgur.com/Y2tTx.jpg

Se puede ver una demostración aquí http://www.web-shine.in/tabs/

Quiero que la TAB cargue la página una vez, y la próxima vez que el usuario haga clic en ella, debería mostrar la página desde el caché del navegador, no desde el servidor.

¿Cuál es la mejor manera de codificar esto?

Intenta algo como esto:

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

Utilice la función one () .

Ex:

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

ACTUALIZAR

Si está intentando almacenar en caché la respuesta de Ajax para que las solicitudes de Ajax posteriores que coincidan con las opciones de Ajax originales devuelvan la respuesta en caché en lugar de hacer una nueva llamada, le recomiendo usar este excelente complemento jQuery http://plugins.jquery.com/ proyecto / ajax-cache-response

Todo lo que necesita hacer es poner esta muestra dentro de una llamada AJAX:

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

Intente hacer su llamada AJAX en el evento “show” de las tabs. Esto solo debería activarse cuando se muestra una pestaña (es decir, cuando la pestaña seleccionada cambia).

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

Lo siento si me equivoco, pero;

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

Es suficiente.