jQuery UI 1.8升级1.13：单面板Tabs改用aria-controls求助

jQuery UI 1.9+ 的 Tabs 组件移除了通过 title 属性绑定共用面板的特性，aria-controls 仅用于关联已存在的面板元素，无法直接实现远程内容加载到同一面板的原有逻辑。以下是无需大量重写遗留代码的兼容实现：

核心实现思路 #

通过拦截 Tabs 的 beforeLoad 事件，取消默认的面板加载行为，手动将远程内容注入到指定的共用面板，并维护标签页的选中状态。

HTML 结构 #

保留原有标签页结构，指定共用面板的 aria-controls 属性：

<div id="tabs">
  <ul>
    <li><a href="remote-page1.html" aria-controls="shared-panel">标签页1</a></li>
    <li><a href="remote-page2.html" aria-controls="shared-panel">标签页2</a></li>
    <li><a href="remote-page3.html" aria-controls="shared-panel">标签页3</a></li>
  </ul>
  <div id="shared-panel">
    <!-- 所有远程内容将加载至此面板 -->
  </div>
</div>

JavaScript 初始化代码 #

$(function() {
  $("#tabs").tabs({
    beforeLoad: function(event, ui) {
      // 阻止Tabs默认的远程加载与面板切换逻辑
      event.preventDefault();
      
      // 获取远程资源地址与共用面板元素
      const remoteUrl = ui.tab.attr("href");
      const sharedPanel = $("#shared-panel");
      
      // 加载远程内容到共用面板
      sharedPanel.load(remoteUrl, function(response, status, xhr) {
        if (status === "error") {
          sharedPanel.html(`加载失败: ${xhr.status} ${xhr.statusText}`);
        }
      });
      
      // 手动更新标签页选中状态
      $("#tabs ul li").removeClass("ui-tabs-active ui-state-active");
      ui.tab.parent().addClass("ui-tabs-active ui-state-active");
    },
    // 初始化时自动加载第一个标签页的内容
    create: function() {
      const firstTabUrl = $("#tabs ul li:first a").attr("href");
      $("#shared-panel").load(firstTabUrl);
    }
  });
});

关键细节说明 #

• beforeLoad 拦截：完全接管远程内容的加载逻辑，避免Tabs自动创建新面板或匹配错误面板
• 手动状态维护：因取消了默认行为，需自行处理标签的激活类切换，保证UI一致性
• 初始化加载：通过 create 事件在组件初始化时加载首个标签内容，与原有1.8版本逻辑对齐
• 兼容遗留属性：若项目中仍依赖 title 属性，可同时保留 title="shared-panel" 与 aria-controls="shared-panel"，不会产生冲突

内容的提问来源于stack exchange，提问作者et3rnal