通过 ajax 在新的浏览器选项卡中打开 JQuery UI 选项卡将直接显示 ajax 响应的 HTML答案

【问题标题】：Opening JQuery UI Tabs in new browser tab via ajax will display the HTML of ajax response directly通过 ajax 在新的浏览器选项卡中打开 JQuery UI 选项卡将直接显示 ajax 响应的 HTML
【发布时间】：2013-10-08 15:02:53
【问题描述】：

我目前正在从 JQuery UI 1.8.14 升级到 JQuery UI 1.10。

使用 v1.8.14 代码，使用新的浏览器选项卡打开选项卡将重新加载整个页面，从而激活默认选项卡（即 tabIndex=0）

我遇到了关于 JQuery UI 选项卡和在新浏览器选项卡/窗口中打开选项卡的问题。在我的页面上，通过右键单击选项卡并选择“在新选项卡中打开链接”。选项卡内容将通过 ajax 加载

问题是新页面将直接显示 ajax 响应的 HTML，没有 CSS 样式、JavaScript 或任何东西。

这显然是 JQuery UI 团队的设计更改。见以下链接： http://bugs.jqueryui.com/ticket/9363

在我看来，这似乎是一个常见问题，但我无法找到任何解决方案。有关解决方法或修复的任何建议？

JQuery UI Tabs Demo 页面是演示这个问题的一个很好的例子： http://jqueryui.com/tabs/

右键单击任何选项卡并选择“在新选项卡中打开链接”。

感谢您的帮助！

【问题讨论】：

标签： javascript jquery ajax jquery-ui jquery-ui-tabs

【解决方案1】：

在 beforeActivate 事件中，对于每个选项卡，将 href 存储为数据对象，然后将 href 设置为 aria-controls。

    $(ui.newTab).parent().find("li a").eq(i).data("href.tabs",$(ui.newTab).parent().find("li a").eq(i).attr('href'));
    $(ui.newTab).parent().find("li a").eq(i).attr('href', '#'+$(ui.newTab).parent().find("li").eq(i).attr('aria-controls'));

在激活事件中，对于每个选项卡，将数据对象中的值设置为 href。

    $(ui.newTab).parent().find("li a").eq(i).attr('href', $(ui.newTab).parent().find('a').eq(i).data("href.tabs"));

【讨论】：