How to specify jQueryUI Tab Target Panel?

Question

Whats the cleanest way to specify a shared target panel for jQueryUI tabs when all the content is loaded via AJAX and the target lies outside of the parent "tabs" div?

For example:

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

EDIT: I would prefer to have a unique title attribute per link

Answer 1

Give your target div a title, e.g.:

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

and give your tab links the same title:

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

It appears this is not possible with the current release of jQueryUI (1.7.2) without event modification.

I have submitted a patch for consideration for a more graceful solution.