Как указать целевую панель вкладок jQueryUI?

Question

Какой самый чистый способ указать общую целевую панель для вкладок jQueryUI, когда весь контент загружается через AJAX, а цель находится за пределами родительского div "tabs" div?

Например:

<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

Похоже, это невозможно в текущей версии jQueryUI (1.7.2) без изменения события.

Я отправил патч на рассмотрение для более изящного решения.

Answer 3

Дайте вашему целевому div название, например ::1001*

<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>