jQuery 和 jQuery UI 升级破坏了选项卡

Question

我有一个使用 jQuery UI 选项卡小部件的网站，它与“旧版本”、jQuery:1.5.1、jQuery UI:1.8.4 配合得很好。

在对网站进行其他更改/升级时，我想迁移到这两个软件包的更新版本，通过逐步升级到每个软件包的“下一个主要版本”来实现。无需更改我自己的 js 代码中的几行，我就可以使用 jQuery 1.8.3 和 jQuery UI 1.8.24，一切仍然正常工作。

将 jQuery 升级到 1.9.1，单击选项卡似乎会触发页面重新加载，而不是切换选项卡。所有选项卡都是静态的，因此不应该有任何 ajax 问题。

页面的 URL(它是 Typo3 安装的一部分)具有以下格式:

https://server.some.where/?id=49&project_id=13&action_type=display

单击选项卡时，会生成基本 href + #tab-X 的 HTTP GET:

https://server.some.where/#tabs-2

由于 jQuery 的早期版本没有启动 HTTP GET，而是愉快地切换选项卡，我被难住了。阅读相关 jQuery 版本的变更日志，我看不到任何匹配的内容，但这可能只是我......:-)

升级 jQuery UI (1.9.2/1.10.2) 会产生另一个问题 - 所有选项卡都从头开始打开(所有 div 依次显示)。

相关 HTML:

<div id="display-tabs">
  <ul class="tabs">
    <li><a href="#tabs-1">...</a></li>
    <li><a href="#tabs-2">...</a></li>
    <li><a href="#tabs-3">...</a></li>
  </ul>
  <div id="tabs-1">...</div>
  <div id="tabs-2">...</div>
  <div id="tabs-3">...</div>
</div>

标签小部件的激活非常简单:

$('#display-tabs').tabs();

jQuery 是从 Google 获取的，看起来也不错:

<link rel="stylesheet" media="screen" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>

我已经暂时消除了测试站点上 jQuery 的大多数其他用途，但这些问题似乎仍然存在。欢迎任何想法...

Answer 1

这个问题是一个已知问题，但我花了一段时间才将这些点联系起来并使用正确的搜索词 - 对此深表歉意!

简而言之，jQuery 从 1.9 版及以上版本开始处理 <base href="URL"> 的组合以及 anchor 的链接 <a href="#tab-X">作为非页面本地的链接。这种行为可能比早期版本中发生的情况更正确，但这一更改破坏了许多基于依赖基本标签的框架构建的网站。我的本地解决方案是在定义选项卡的列表中提供完整链接，如下所示://$HTTP_HOST/$REQUEST_URI#tab-X .

有关该问题的更多信息:

• jQuery UI bug 7822
• Fairly good explanation & some solutions