jquery - 如何制作一个加载页面一次的jQuery水平选项卡

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/项目/ajax 缓存响应

Answer 2

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

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

Answer 3

尝试在选项卡的“显示”事件中进行 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});

够了。