jquery ui 选项卡在 .tabs() 初始化后更改内容

Question

目标:初始化后如何更改 ui 选项卡的内容。

参见下面的代码。$tabs.find(content-1)等之后可能有一些东西

1. 实际上，我的选项卡包含基于 json 请求的内容，然后这些内容将根据要求(图表、表格等)进行解析和显示。
2. 我无法使用
3. tab1描述的方法在 ui 文档中获取 ajax 内容，因为我需要所有选项卡都有数据分别并同时加载。 Ajax方法不断替代一种选项卡数据与其他选项卡数据这不是我的要求。

理想情况下，

1. 选项卡应在初始化时显示“正在加载..”消息。
2. 然后，Afetr 我检测到了它的初始化事件，我应该进行 3 个不同的 ajaxcalls，处理数据，无论哪个完成，“正在加载..”消息都应该替换为其内容。

My JSFIDDLE

HTML:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab1</a>
        </li>
        <li><a href="#tabs-2">tab2</a>
        </li>
        <li><a href="#tabs-3">tab3</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p>loading...</p>
    </div>
    <div id="tabs-2">
        <p>loading...</p>
    </div>
    <div id="tabs-3">
        <p>loading...</p>
    </div>
</div>

JS

$tabs = $('#tabs').tabs({
    cache: false,
});
//
$tabs.do something here
$tab. detect evet if tabs have initialized ..
then send ajax requests and append to tabs content area ..

Answer 1

工作 DEMO

试试这个

我想这就是你所需要的

$(document).ready(function () {

    $tabs = $('#tabs').tabs({
        cache: false,
    });
    if ($('#tabs').hasClass('ui-tabs')) { // check if tabs initilized
        $('.tab').each(function () {
            var tab = $(this);
            $.ajax({
                url: '/echo/html/',
                success: function (data) {
                    tab.html("success"); // for demo
                }

            });

        });
    }
});