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

【问题标题】：jQuery - tabs, use url to load ajax contentjQuery - 选项卡，使用 url 加载 ajax 内容
【发布时间】：2012-12-30 22:29:44
【问题描述】：

所以我的脚本是这样的

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 加载带有选定选项卡的页面 - 它可以工作，但由于onClick 属性，div 为空。如何解决？

我为我的英语道歉

【问题讨论】：

Wczytaj 函数有什么作用？
如果您将<a> 标记的href 设置为URL，jQuery UI 将AJAX 将页面加载到您的选项卡中。 jqueryui.com/tabs/#ajax
@RocketHazmat ，我刚刚更新了我的问题。函数 Wczytaj 将内容加载到 div。
你不需要那个函数，jQuery UI 可以为你加载它。

标签： jquery ajax tabs

【解决方案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 事件。

创建标签时可以绑定：

$('#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');
});

【讨论】：

好的，但是使用“我的”功能我有一个“加载”的效果。（之前，和成功）。如何仅使用 url 来获得这种效果？
@RocketHazmat ：我发现它是可能的，如果我们在锚标签上提供一个标题属性，标题上提供的相同值将是为远程标签创建的 div 的 id
@hsuk：酷！没想到你能做到这一点:-)
@hsuk：还有实验：-D
@hsuk 似乎在 jQuery UI 1.10 中，您使用 <li> flynsarmy.com/2015/05/specify-jquery-ui-ajax-tabs-panel-element 的 aria-controls 属性设置面板的 id

【解决方案2】：

在 Jquery 中加载 tab 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*/  }
});

【讨论】：

【解决方案3】：

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

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

【讨论】：