javascript - Jquery UI 选项卡 - 通过 ajax 打开选项卡内的链接

Question

如何打开一个选项卡并通过 ajax 从另一个选项卡加载链接。例如:

• 用户点击#tab_a内的链接

• tab_a 隐藏

• tab_b 显示应用了 .loading

• 内容通过ajax加载到#tab_b
• .loading 从 #tab_b 中删除

我正在使用Jquery UI tabs

谢谢!

Answer 1

假设“tab_a”是要点击的实际选项卡，“tab_a_content”是内容实际进入的位置(tab_b 和 tab_b_content 相同):

$("#tab_a_content link").click(function() {
    $("#tab_b").trigger("click");
    $("#tab_b_content").addClass("loading");
    $.ajax({
        url: "whatever.html",
        success: function(data) {
            //Do whatever you need to do with your data
            $("#tab_b_content").removeClass("loading").html(data);
        },
        error: function(err) {
            //Display error messages and hide the loading class
            $("#tab_b_content").removeClass("loading").html("Error! " + err);
        }
    });