jQuery 和 jQuery UI 升级打破了标签答案

【问题标题】：jQuery and jQuery UI upgrade breaks tabsjQuery 和 jQuery UI 升级打破了标签
【发布时间】：2013-03-15 13:01:31
【问题描述】：

我有一个使用 jQuery UI Tabs 小部件的网站，它适用于“ye old versions”，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 的大多数其他用途，但这些问题似乎仍然存在。欢迎任何想法...

【问题讨论】：

文档中的$('#display-tabs').tabs(); 准备好了吗？例如，$(function(){ $("#display-tabs").tabs(); });
另外，https://ajax.googleapis.com 应该只是 //ajax.googleapis.com（请参阅 encosia.com/… 了解原因）
是的@Mooseman，$("#display-tabs").tabs(); 线与几百个朋友合作，放置在工作中的$(function(){});
对我来说似乎工作正常：jsfiddle.net/Nu2kn
你说得对，我应该跳过这些链接的协议。不过，不要认为它会帮助解决主要问题......

标签： jquery jquery-ui typo3 jquery-ui-tabs

【解决方案1】：

这个问题是一个已知问题，但我花了一些时间来连接这些点并使用正确的搜索词 - 很抱歉！

简而言之，jQuery 1.9 及更高版本将<base href="URL"> 和指向锚点<a href="#tab-X"> 的链接的组合视为不是页面本地的链接。这种行为可能比早期版本中发生的更正确，但这种变化破坏了许多建立在依赖于基本标签的框架上的网站。我的本地解决方案是在定义选项卡的列表中提供完整链接，如下所示：//$HTTP_HOST/$REQUEST_URI#tab-X。

有关该问题的更多信息：

【讨论】：