如何使用 jQuery UI 选项卡通过 ajax 加载外部 div答案

【问题标题】：How to use jQuery UI tabs to load external div via ajax如何使用 jQuery UI 选项卡通过 ajax 加载外部 div
【发布时间】：2013-01-03 18:37:14
【问题描述】：

我正在使用 Jquery UI 选项卡功能通过 ajax 加载内容。我想在 ajax 调用中加载一个特定的 div，而不是整个页面。如果不使用 jQuery 的 load()，这可能吗？

从代码中可以看出，这是一个标准的基本 jQuery 选项卡实现，但我想要一个特定的 div 而不是整个页面。

这是我的html：

<div id="tabs">
    <ul>
        <li><a href="tab-1">Tab One</a></li>
        <li><a href="tab-2">Tab Two</a></li>
        <li><a href="http://www.domain.com #target">Ajax tab</a></li>
    </ul>

    <div id="tab-1>Tab one content</div>
    <div id="tab-2>Tab two content</div>
</div>

还有内联脚本：

<script>
    $(function() {
        $( "#tabs" ).tabs();    
    });
</script>

有人知道这是否可行吗？

【问题讨论】：

您是说需要通过 ajax 加载选项卡内的一些内容，而不是选项卡的全部内容？另外，为什么选项卡的 load() 事件不是一个选项？
我需要通过 ajax 从远程页面加载内容，但不是整个页面，只有一个 div 即 #content。如果可能的话，我想在不使用 load() 的情况下这样做，但我不反对这样做。我不完全确定 ajax 是否是最好的解决方案，因为我需要为关闭 javascript 的用户提供后备，所以我可能会回到工作服务器端
所以您不想使用 load() 来进行 ajax 调用，因为您的用户可能关闭了 javascript？在这种情况下，您可能也不应该使用 jQuery UI，因为 Tabs libaray 使用 load() 来加载远程内容。就像你说的，如果关闭 javascript 对你来说很重要，你可能最好使用服务器端页面。
是的，如果用户可能关闭了 js，那么使用 jQuery 就有点失败了……

标签： ajax jquery tabs

【解决方案1】：

内森。

是的，这是可能的。使用 jQuery ajax“加载”功能。示例：

$('#result').load('ajax/test.html #container');

对于您的第三个选项卡，您应该通过 ajax 调用手动加载内容，您还可以定义选择器，您需要加载页面的哪一部分。因此，通过一般方式创建第三个选项卡，为第三个选项卡加载页面内容并创建选项卡。或者您可以在用户单击选项卡时动态加载第三个选项卡的内容。

更多信息在这里：http://api.jquery.com/load/，请参阅“加载页面片段”段落。

【讨论】：