Question

当缓存保持禁用状态（即cache: false）时，如何阻止选项卡再次加载远程内容？基本上，我想select一个标签，但不是load它。

Answer 1

事实证明，您可以通过在每个标签的锚元素中设置'cache.tabs'数据来控制每个标签的缓存。

我在另一篇文章中发布了答案：JQuery UI Tabs caching，但我会在这里重新发布代码。

// disable cache by default
$("#tabs").tabs({
    cache: false,
});

然后在第一次加载选项卡内容后，您可以为该选项卡启用缓存。我只是将其放在$(document).ready中，以便缓存页面：

$(document).ready(function () {
    // cache content for the current tab
    var currentTabIndex = $("#tabs").tabs('option', 'selected');
    var currentTabAnchor = $("#tabs").data('tabs').anchors[currentTabIndex];
    $(currentTabAnchor).data('cache.tabs', true)
});

Answer 2

$(function () {
        $("#tabs").tabs({
            beforeLoad: function (event, ui) {
                if (ui.tab.data("loaded")) {
                    event.preventDefault();
                    return;
                }
                ui.ajaxSettings.cache = false,
                ui.panel.html('<img src="images/loader.gif" width="24" height="24" style="vertical-align:middle;"> Loading...'),
                ui.jqXHR.success(function() {
                    ui.tab.data( "loaded", true );
                }),
                ui.jqXHR.error(function () {
                    ui.panel.html(
                    "Couldn't load Data. Plz Reload Page or Try Again Later.");
                });
            }
        });
    });

Answer 3

...按照标签的网址，而不是通过ajax加载其内容

请注意，在新窗口中打开标签是意料之外的，例如暴露可用性问题的不一致行为（http://www.useit.com/alertbox/tabs.html）。

$('#example').tabs({
    select: function(event, ui) {
        var url = $.data(ui.tab, 'load.tabs');
        if( url ) {
            location.href = url;
            return false;
        }
        return true;
    }
});

通过：http://jqueryui.com/demos/tabs/#...immediately_select_a_just_added_tab

jQuery UI选项卡：如何在不重新加载的情况下切换到（ajax）选项卡？

3 个答案: