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

问题描述

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

How can I open a tab and load a link via ajax from another tab. Eg:

• 用户点击#tab_a内的链接



• tab_a隐藏




• tab_b显示应用了.loading



• 内容通过ajax加载到#tab_b


• .loading从#tab_b中删除

• User clicks link inside #tab_a

• tab_a hides

• tab_b shows with .loading applied

• Content is loaded via ajax into #tab_b
• .loading removed from #tab_b

我正在使用

谢谢！

推荐答案

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

我在

这篇关于Jquery UI选项卡 - 通过ajax在选项卡内打开链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！