jQuery 工具：只有一个 AJAX 选项卡

Question

我想使用 jQuery 工具选项卡，并拥有一组常规内联内容选项卡，和一个 AJAX 选项卡。但我只看到内联内容或 ajax 内容的示例。我可以混合它们吗？

Answer 1

AFAIK，要么全是 AJAX，要么没有。但是，您可以自己轻松地对单个窗格进行 AJAX。您需要做的就是添加一个点击处理程序（最好使用 .one() 以便在第一次运行后将其自身删除）到选项卡；然后，此点击处理程序可以使用 .load() 加载窗格的内容或无论您想要什么其他 AJAX 含义。

例如，HTML 会是这样的：

<ul class="tabs">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li id="ajax-tab"><a href="#">Tab 3</a></li>
</ul>
<div class="panes">
    <div>First tab content. Tab contents are called "panes"</div>
    <div>Second tab content</div>
    <div id="ajax-pane"></div>
</div>

JavaScript 会是这样的：

$("ul.tabs").tabs("div.panes > div");
$('#ajax-tab').one('click', function() {
    $('#ajax-pane').load('/some/path/that/returns/our/html');
});

这是一个简单的实例： http://jsfiddle.net/ambiguously/stxha/