Question

我想通过AJAX获取我的标签的加载内容，但仅限于第一个标签点击。现在，每次单击任何选项卡时都会加载选项卡。这可能吗？

我的HTML

<div id="tabContainer">
<ul>
<li><a href="/Home/Tab1">Tab1</a></li>
<li><a href="/Home/Tab2">Tab2</a></li>
<li><a href="/Home/Tab3">Tab3</a></li>
</ul>
</div>

修改

我无法使用“缓存”选项，因为选项卡中的内容可能会更改..

Answer 1

$(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/prettyPhoto/dark_square/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 2

“缓存”选项可以解决问题。

$( ".selector" ).tabs({
  cache: true 
  //some other options 
});

http://docs.jquery.com/UI/Tabs#option-cache

Answer 3

执行load（）后，您可以hide()或remove()链接。或者，如果您希望允许多次刷新选项卡内容，则可以删除第一次加载的任何内容并重新加载（）。

您还可以更改链接标记的ID，并添加次要行为以便重新开始。

Answer 4

我认为您可以捕获该事件，检查选项卡是否已包含内容并停止ajax（如果有）。

e.g。

$('#example').tabs({
    select: function(event, ui) {
         if($('#' + ui.panel.id).html() != ''){
            return;
         }
    }
});

jQuery-UI选项卡 - 只加载一次

4 个答案: