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地址来加载

内容，例如：http://myurl.com/page.php#id2 应该加载带有选定标签id2的页面——它可以实现，但由于onClick属性，

是空的。如何解决？

对我的英语表示歉意。

- breq

---

Wczytaj 函数是做什么的？ - gen_Eric

如果你设置<a>标签的href为URL，jQuery UI将会通过AJAX加载页面到一个选项卡中。http://jqueryui.com/tabs/#ajax - gen_Eric

@RocketHazmat，我刚刚更新了我的问题。函数Wczytaj将内容加载到div中。 - breq

你不需要那个函数，jQuery UI可以为你加载它的AJAX。 - gen_Eric

Answer 1

你不需要使用自己的函数来实现AJAX加载选项卡，jQuery可以为您完成这项工作。只需将href设置为URL，并且不添加<div>即可。

<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事件。

它们可以在创建选项卡时绑定：

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

或者它们可以在之后绑定：

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

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

- gen_Eric

---

有没有办法为这些ajax页面提供ID？ - hsuk

@RocketHazmat：我发现如果我们在锚标签上提供title属性，那么提供的相同值将成为远程选项卡创建的div的id。 - hsuk

@hsuk：太酷了！我没想到你能做到这个 :-) - gen_Eric

@hsuk：还有实验 :-D - gen_Eric

@hsuk 在jQuery UI 1.10中，似乎是使用<li>元素的aria-controls属性来设置面板的ID。https://www.flynsarmy.com/2015/05/specify-jquery-ui-ajax-tabs-panel-element/ - jofitz

Answer 2

在Jquery中加载选项卡的ajax内容之前，重置href url：

$( "#pending_recs" ).tabs({
    beforeLoad: function( event, ui ) {
        var filter_url = get_url();
        var url_str = site_url+'/admin/pending_recs/'+filter_url+"/0";

        $("#pending_recs .ui-tabs-nav .ui-state-active a").attr('href',url_str);

        ui.panel.html('<div class="loading">Loading...</div>');

        ui.jqXHR.error(function() {
            ui.panel.html('<div align="center"><p>Unable to load the content, Please <a href="javascript:void(0)" onclick="return load_contents();">Click here to Reload</a>.</p></div>');
        });
    }
    ,load:function( event, ui ) { /* After page load*/  }
});

- ShivarajRH

Answer 3

如果您只是将每个选项卡链接的 href 属性设置为应加载的 ajax URL，那么它应该可以工作。

如果您不想这样做，那么请删除 onClick 属性。问题在于当页面加载时，选择特定选项卡（例如 #id2）的触发器会在单击元素绑定之前发生。您需要在此之前绑定单击处理程序，并在选择相关选项卡时调用相应的处理程序。

- Explosion Pills