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); 
     } 
    }); 

Answer 2

没有与你的代码的任何运气威尔森，但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; 
}); 

谢谢！

Answer 3

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