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

Question

我正在使用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>

有人知道这是否可能吗？

Answer 1

内森

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

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

对于第3个选项卡，您应该通过ajax调用手动加载内容，还可以定义选择器，从而准确地选择所需页面的一部分。 因此，以常规方式创建第三个选项卡，为第三个选项卡加载页面内容并创建选项卡。 或者，当用户单击选项卡时，可以动态加载第三个选项卡的内容。

此处的更多信息： http : //api.jquery.com/load/ ，请参见“加载页面片段”段落。