jQuery UI 选项卡使用 aria-controls 而不是标题来拥有单个面板

Question

我需要将使用 jquery UI 1.8 的遗留项目更新到最新的 1.13

我在 jQuery 1.9 中面临一个问题，选项卡小部件发生了巨大的重大变化，当前的实现 (1.8) 将所有选项卡都放在一个面板中，并使用 title 属性告诉面板要使用的每个远程选项卡

根据迁移文档标题替换为

area-controls

它似乎不是一个简单的替代品，因为我无法让新的选项卡小部件使用带有远程

href

的单个面板，

area-controls

似乎没有任何效果

如何实现这一点的例子会很棒，否则，我将不得不重写所有遗留代码以处理每个选项卡的不同面板（我试过：|这将永远）

jsFiddle：https://jsfiddle.net/et3rnal/sbrzd1fk/69/

Answer 1

我试图在激活事件期间手动更新 URL，但我想我发现了新方法的工作原理。只需将新元素

aria-controls

添加到

li

而不是链接

a

（至少这是我添加标题的遗留代码的位置）

<div id="tabs">
   <ul>
     <li aria-controls="panel"><a href="link1.html"><span>Link 1</span></a></li>
     <li aria-controls="panel"><a href="https://jsfiddle.net/about"><span>Link 2</span></a></li>
     <li aria-controls="panel"><a href="https://jsfiddle.net"><span>Link 3</span></a></li>
     <li aria-controls="panel"><a href="link4.html"><span>Link 4</span></a></li>
   </ul>
  <div id="panel" >Content should be loaded here.</div>
</div>

我在这里找到这个

例子https://jsfiddle.net/et3rnal/v79hpygr/1/