Question

我正在使用JQuery UI标签，并希望从生成的页面加载片段。但是，整个页面都已加载。这是代码：

<head>
<script src="/js/jquery-ui-1.8.15.custom.min.js"></script>
<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>
</head>


<div id="tabs">
<ul > 
    <li><a href="/page #content">Tab Head</a></li>
</ul>
</div>

有一种简单的方法吗？ Tabs插件是使用.load（）还是.get（）ajax调用？

Answer 1

您可能需要通过拦截所需的标签并加载内容来自行完成。例如，您可以包含用于将片段加载到数据属性的实际URL，例如data-content-url="/page #content"，然后加载它在select事件中。所以，它看起来像是：

$('#tabs').tabs({
    select: function(event, ui) {
        var $tabAnchor = $(ui.tab);
        if (ui.index == 0 && !$tabAnchor.data('completed')) {
            $($tabAnchor.attr('href')).load($tabAnchor.data('content-url'), function() {
                // indicate the content has been loaded
                $tabAnchor.data('completed', true);
            });
        }
    }
});

HTML看起来像：

<div id="tabs">
    <ul>
        <li><a href="#tabs1" data-content-url="/page #content">Tab Head</a></li>
        <li><a href="#tabs2">Tab 2</a></li>
    </ul>

    <div id="tabs1"></div>
    <div id="tabs2">...</div>
</div>

Answer 2

您可以使用加载事件（“在加载远程选项卡的内容后触发此事件。”）选项卡来解析/准备/编辑加载的内容并获取页面的片段。 / p>

使用ajax加载文档片段的JQuery UI选项卡

2 个答案: