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

【问题标题】：How to make a jQuery Horizontal Tab that loads the page once如何制作一个加载页面一次的jQuery水平选项卡
【发布时间】：2011-03-31 11:07:58
【问题描述】：

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

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

可以在这里看到一个演示http://www.web-shine.in/tabs/

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

最好的编码方式是什么？

【问题讨论】：

我们需要您的 HTML，而不仅仅是网页图片。您的 JavaScript 需要编辑，以禁用当前页面上的 .click() 事件并在单击其他选项卡时重新启用它。没有来源，我们无法为您提供更多帮助。
这里是代码/demo，查看web-shine.in/tabs
我测试了您给定的链接，它可以正常工作。
@Deele -> 它可以工作，但并不完美，我需要加载一次页面，如果当前时间是 X，你转到第 1 页它显示 X，转到第 2 页它显示 X +Y，回到第 1 页应该再次显示 X，而不是 X+Y+Z！我不想一次又一次地加载页面！！！
无需在页面标题中加上“未回答”——在 SO 上没有接受答案的问题一目了然。（答案数计数器将是白色而不是黄色）

标签： jquery jquery-tabs

【解决方案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

【讨论】：

这不是只显示一次标签吗？页面被AJAX加载后，如果函数只执行一次，那么tab会如何变化？？
这只会使标签可单击一次，因此他无法再次单击以重新加载。这与显示或隐藏无关。请参阅jsfiddle.net/xM5E7/1 的示例
是的，我明白这一点，但我只是说 OP 可能希望标签页可以多次点击，他只是希望标签页被缓存以节省带宽......那是我的猜...所以也许在.one() 函数中应用另一个点击处理程序？
这没有多大意义。如果不用于加载内容，再次单击选项卡的目的是什么。
"希望 TAB 加载页面一次，下次用户点击它时，它应该显示来自浏览器缓存的页面，而不是来自服务器的页面！" idk 如果这有意义（来自 OP）

【解决方案2】：

试试这样的：

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

【讨论】：

您保存了我的工作，您的代码完全按照我想要的方式运行 thnx :) 并感谢大家对这个问题的回复和帮助！！！

【解决方案3】：

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

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

【讨论】：

请通过总结问题上下文中的链接文本来详细说明这一点。如果链接更改或中断，则此答案没有上下文或价值。

【解决方案4】：

尝试在选项卡的“显示”事件中进行 AJAX 调用。当显示选项卡时，这应该只触发（即所选选项卡更改）。

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

【讨论】：

好的，我现在明白了。如何设置一个全局变量“isLoaded”，它在初始化时是错误的。当用户单击选项卡（“显示”事件）时，您检查 var 是否为 false。如果为 false，则加载所有选项卡的内容并将 var 设置为 true。

【解决方案5】：

如果我错了，我很抱歉；

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

够了。

【讨论】：