How to Initialize Tabbed Content outside Tabbed Container in jQuery UI tabs?

Is it possible and if so, how would you initialize tabbed content outside of the tabs container element?

The documentation all includes the tabs and the tab content in the same container, example:

<div id="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div id="tab1">
        Tab 1 content
    </div>
    <div id="tab2">
        Tab 2 content
    </div>
    <div id="tab3">
        Tab 3 content
    </div>
</div>

However, for the project I'm working on, the navigation and the tab content are not located within the same container, thus:

<nav id="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
</nav>
...
<article>
    <section id="tab1">
        Section 1 content
    </section>
    <section id="tab2">
        Section 2 content
   开发者_JAVA百科 </section>
    <section id="tab3">
        Section 3 content
    </section>
</article>

---

Looking at the source code of tabs (Lines 228 and 233), it seems impossible to do this without some sort of "hack" like cloning the navigation as William Niu suggests, or containing both the navigation and the panels inside a common container, etc. The current iteration of tabs looks for the tab panels inside the parent element; i.e. it uses find().

But I'm still hopeful that you can use a common container, it looks like you can place the navigation (and panels) anywhere inside the container (L215), and you don't have to place the container next to or near the navigation or panels, e.g. the actual tab elements can be deep within the container.

Update: Now there is an official way to do this: http://bugs.jqueryui.com/ticket/7715

---

I don't know if this would work for you, but one solution would be to access an element that does contain both.

for example

$( "#tabs").parent().tabs();

Check out this fiddle

---

If you just want it to have that look to the user, you could clone the navigation bar to somewhere else and remove the original one.

$('#tabs').tabs();

// clone the navigation bar and put it in the placeholder
var copy = $('#tabs').clone(true).attr('id', 'placeholder');
copy.find('div.ui-tabs-panel').remove();
$('#placeholder').replaceWith(copy);

// remove the original navigation bar
$('#tabs > ul').remove();

$('#placeholder li > a').click(function() {
    $(this).parent().siblings().removeClass('ui-tabs-selected ui-state-active');
});

See this in action: http://jsfiddle.net/william/QAJ2Z/1/.