Question

当通过AJAX加载所有内容且目标位于父“tabs”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

使用aria-controls标记上的li属性选择面板的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），这似乎是不可能的。

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

如何指定jQueryUI选项卡目标面板？

3 个答案: