如何指定jQueryUI Tab目标面板？

Question

当所有内容都是通过 AJAX 加载并且目标位于父“选项卡”div 之外时，为 jQueryUI 选项卡指定共享目标面板的最简洁方法是什么？

例如：

<div id="tabs">
  <ul>
    <li><a href="link1.html" title="Go to Link 1"><span>Link 1</span></a></li>
    <li><a href="link2.html" title="Go to Link 2"><span>Link 2</span></a></li>
    <li><a href="link3.html" title="Go to Link 3"><span>Link 3</span></a></li>
    <li><a href="link4.html" title="Go to Link 4"><span>Link 4</span></a></li>
  </ul>
</div>

<div id="panel">Content should be loaded here.</div>

编辑：我希望每个链接都有一个唯一的标题属性

Answer 1

使用 li 标签上的 aria-controls 属性来选择面板的 id

<div id="tabs">
   <ul>
     <li aria-controls="panel"><a href="link1.html"><span>Link 1</span></a></li>
     <li aria-controls="panel"><a href="link2.html"><span>Link 2</span></a></li>
     <li aria-controls="panel"><a href="link3.html"><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>

Answer 2

为您的目标 div 指定一个标题，例如：

<div id="panel" title="contentPane">Content should be loaded here.</div>

并为您的选项卡链接指定相同的标题：

<div id="tabs">
  <ul>
    <li><a href="link1.html" title="contentPane"><span>Link 1</span></a></li>
    <li><a href="link2.html" title="contentPane"><span>Link 2</span></a></li>
    <li><a href="link3.html" title="contentPane"><span>Link 3</span></a></li>
    <li><a href="link4.html" title="contentPane"><span>Link 4</span></a></li>
  </ul>
</div>

Answer 3

看来，在当前版本的 jQueryUI (1.7.2) 中，如果不修改事件，这是不可能的。

我已提交补丁以考虑更优雅的解决方案。