Jquery UI 选项卡小部件 - Href 和 aria-controls答案

【问题标题】：Jquery UI Tabs Widget - Href and aria-controlsJquery UI 选项卡小部件 - Href 和 aria-controls
【发布时间】：2013-06-11 10:48:35
【问题描述】：

我在这里头疼得厉害......

我正在将使用 jQuery 1.3 的旧网站更新到 jQuery 1.10。现在，我从 2 天以来一直在努力解决如何动态更改标签的 URL 以便将新内容重新加载到同一个标签中。

我稍微澄清一下。假设我有一个标签。当我单击此选项卡时，我希望在此处显示“page1.php”。这里没有问题！我的 page1.php 内容显示良好。在里面，我有一个链接“转到下一页”，它应该在我的标签内显示下一页（page2.php）。当我单击此链接时，我想告诉我的标签更改其 href 属性并重新加载新内容。

我在官方文档上看到“url”和“title”已被弃用，我们应该改用“aria-controls”。

我尝试了很多来处理它，但仍然找不到任何解决方案。

这是旧网站过去的做法：

$("#tabs").tabs("url", "1", "page2.php");
$("#tabs").tabs('load', 1);

这是我尝试的第一段代码：

$("#tabs").attr('aria-controls', "page2.php");
$("#tabs").tabs('load', 1);

我什至尝试过刷新但还是不行：

$("#tabs").attr('aria-controls', "page2.php");
$("#tabs").tabs('refresh');

提前感谢您的帮助。

【问题讨论】：

标签： jquery jquery-ui tabs href jquery-ui-tabs

【解决方案1】：

最后，第三个对我的大脑更好。这是一个解决方案：

function loadURLinTab(tabsWidget, url)
{
    var active = tabsWidget.tabs( "option", "active" );

    tabsWidget.find("ul>li a").eq(active).attr('href', url);
    tabsWidget.tabs('load', active);
}

传递 jQuery 对象（Tabs 小部件的）和您要在选项卡中加载的 URL，然后就可以了！

【讨论】：

【解决方案2】：

这是另一种如何通过点击更改 url 的方法，使用 jquery-ui api 方法。

首先设置标签

$("#tabs").tabs({
    beforeActivate: function(event, ui) {
        ui.newTab.context.href = $("#linkID").attr('href');
    }
});

然后在链接上单击激活选项卡，这会将选项卡 href 更新为链接 href。

$("#linkID").on('click', function() {
    $("tabs").tabs('option','active',1);
});

希望这对某人有所帮助。

【讨论】：