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

Question

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

• 用户单击#tab_a中的链接

• tab_a隐藏

• tab_b显示应用了.loading

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

我正在使用Jquery UI选项卡

谢谢！

Answer 1

HTML：

<div class="demo">
  <div id="tabs">
    <ul>
      <li>
        <a href="#tabs-1">
          Tab-1
        </a>
      </li>
      <li>
        <a href="#tabs-2">
          Tab-2
        </a>
      </li>
      <li>
        <a href="#tabs-3">
          Tab-3
        </a>
      </li>
    </ul>
    <div id="tabs-1">
      <p>
        Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. 
        <a href="#">
          Curabitur
        </a>
        nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
      </p>
    </div>
    <div id="tabs-2">
      <p>
        Morbi tincidunt, dui sit amet facilisis feugiat, odio metus 
        <a href="#">
          gravida
        </a>
        ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis.
      </p>
    </div>
    <div id="tabs-3">
      <p>
        Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. 
        <a href="#">
          Aliquam
        </a>
        vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.
      </p>
    </div>
  </div>
</div>
<!-- End demo -->

jQuery的：

$(function() {
    $("#tabs").tabs();
});

$(".ui-widget-content a").live("click", function() {
    var ID = $(this).closest(".ui-widget-content").attr("id").toString().substr(-1);
    ID = (parseInt(ID) - 1) + 1;
    var No_of_tabs = $("#tabs").tabs('length');
    if (ID >= parseInt(No_of_tabs)) {
        ID = 0;
    }
    $("#tabs").tabs('select', ID); // Move to another tab
    $("#service").load($(this).attr("href"), function() {
        //when content loaded, do what you want to do...
    });
    return false;
});

我在http://codebins.com/bin/4ldqpae上完成了bin

Answer 2

假设“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);
        }
    });

Answer 3

你的代码Willson没有运气，但是jquery ui tabs docs让我朝着正确的方向前进。

$(".tab_content a").live("click", function(){ 
    $("#tab_container").tabs('select', 1); // switch to other tab
    $("#service").load($(this).attr("href"), function(){
        //once content loaded, do stuff
    });
    return false;
});

谢谢！