jQuery - 选项卡，使用 url 加载 ajax 内容

Question

所以我的脚本看起来像这样

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

function Wczytaj(link, div_id, parametr1, parametr2, parametr3)
{
   $.ajax(link, { data: { par1: parametr1, par2: parametr2, par3: parametr3 },
   type: "post",
     success: function(data) {
       $('#'+div_id).fadeOut("medium", function(){
       $(this).append(data);
      $('#'+div_id).fadeIn("medium");
     });
  }
 });
}

<div id="tabs">
    <ul>
        <li><a href="#id1" onClick="Wczytaj('trouble2.php','id1','null','null','null');">My id 1</a></li>
        <li><a href="#id2" onClick="Wczytaj('trouble2.php?action=lista','id2','null','null','null');">My id 2</a></li>
        <li><a href="#id3" onClick="Wczytaj('troubl2.php?action=old','id3','null','null','null');">My id3</a></li>
    </ul>

    <div id="id1"></div>
    <div id="id2"></div>
    <div id="id3"></div>
</div>

它工作没有问题，但我还想使用 URL 地址来加载 div 内容例如，http://myurl.com/page.php#id2 应该加载带有 id2 选定选项卡的页面 - 它可以工作，但 div 是空的，因为 onClick 属性。如何解决？

我为我的英语道歉

Answer 1

您不需要使用自己的函数将 AJAX 加载到选项卡中，jQuery 可以为您完成此操作。只需设置 href到 URL，并且不要添加 <div> s。

<div id="tabs">
    <ul>
        <li><a href="trouble2.php">My id 1</a></li>
        <li><a href="trouble2.php?action=lista">My id 2</a></li>
        <li><a href="trouble2.php?action=old">My id3</a></li>
    </ul>
</div>

jQuery 将创建选项卡，并通过 AJAX 自动加载页面。请参阅此处的文档:http://jqueryui.com/tabs/#ajax

它也将使<div>为你。在示例中，它们被命名为 ui-tabs-X ，其中X是选项卡索引。所以，http://myurl.com/page.php#ui-tabs-2应该在第二个选项卡打开的情况下加载页面。

在这里查看 jQuery 的演示:http://jqueryui.com/resources/demos/tabs/ajax.html#ui-tabs-2

编辑:如果您想在加载远程选项卡之前或之后运行函数，jQuery UI 提供 tabsbeforeload 和 tabsload 事件。

创建选项卡时可以绑定(bind)它们:

$('#tabs').tabs({
    beforeLoad: function(event, ui){
        alert('loading');
    },
    load: function(event, ui){
        alert('loaded');
    }
});

或者可以在之后绑定(bind)它们:

$('#tabs').on('tabsbeforeload', function(event, ui){
    alert('loading');
});

$('#tabs').on('tabsload', function(event, ui){
    alert('loaded');
});