如何制作一个加载页面的jQuery Horizo​​ntal Tab

Question

我想要一个jQuery水平选项卡窗格（下面的屏幕截图），其中单击选项卡会加载div中的外部页面，但在加载后点击它不会再次加载页面。

共有7个标签Wall，Latest，Discussion，Poll，Club Message，Create。

可以在此处看到演示http://www.web-shine.in/tabs/

我希望TAB加载页面一次，下次用户点击它时，它应该显示浏览器缓存中的页面，而不是服务器。

对此进行编码的最佳方式是什么？

Answer 1

使用one()功能。

例如：

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

<强>更新

如果您尝试缓存Ajax响应，以便后续与原始Ajax选项匹配的Ajax请求将返回缓存响应而不是进行新调用，那么我强烈建议您使用这个优秀的jQuery插件http://plugins.jquery.com/project/ajax-cache-response

Answer 2

您需要做的就是将此示例放在AJAX调用中：

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

Answer 3

尝试在标签的“show”事件中进行AJAX调用。只有在显示标签时（即选定的标签更改时），才会触发。

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

Answer 4

尝试这样的事情：

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

Answer 5

如果我弄错了，我很抱歉;

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

这就够了。