如何使 Jquery 嵌套 Ajax 选项卡

Question

谁能帮我通过 ajax 调用获得嵌套标签。

说明： 我有带有 ajax 选项的 Jquery 选项卡

代码：

$( ".has_ajax_tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html("<h3>OOPS...Something went wrong!</h3> Couldn't load this tab at this time. Please try again later.");
            }
        },
        spinner: "Loading...",
        fxSlide: true
    });

HTML 代码：

 <div id="tabs" class="has_ajax_tabs">
                                 <ul>
                                     <li><a href="#tabs-1">Profile Details</a></li>
                                     <li><a href="nestedTabsLink.php">Users</a></li>
                                 </ul>

 <div id="tabs-1">  Profile Details form here </div> </div>

由 Ajax 调用加载的nestedTabsLink.php

<div id="tabs-nested" class="has_ajax_tabs">
    <ul>
        <li><a href="#tabs-inner1">Inner Tab1</a></li>
        <li><a href="#tabs-inner2">Inner Tab2</a></li>
    </ul>
    <div id="tabs-inner1">
        Nested Tabs1
    </div>
    <div id="tabs-inner2">
        Nested Tabs2
    </div>
</div>

错误：加载的 nestedTabsLink.php 文件也有选项卡，如果由 Ajax 加载，这些选项卡将不起作用。如果没有 Ajax，它可以完美运行。谁能帮我获取代码 sn-p/guidelines？

谢谢

Answer 1

所以如果你要操作 nestedTabsLink.php 文件，你也会有一个选项卡设置，对吧？

使用 ajax，请求页面内的 javascript 不会被解析。解决这个问题的最好方法是添加一个在页面加载后运行的函数。因此，您可以复制nestedTabsLink.php 中选项卡的代码并将其粘贴到ajax 调用的完成事件中。

Answer 2

首先，你最好提高你的接受率。

如果我理解正确，您不会加载在第二组选项卡上执行“选项卡魔术”的脚本。当然可以选择让它工作，但我建议修改整体架构。您不应该通过 AJAX 调用加载 HTML 标记，因为它是多余的。只加载所需的数据，然后根据需要使用 JS 渲染数据。