Tabs html issue -- suggestions?
I have previously used the jQuery UI Tabs widget, and I'm trying to
upgrade to the latest version, but it looks like the required HTML
layout has changed. Here is the old HTML layout that I am using:
<div id="header">
...
<ul id="tabs">
<li><a href="#tab1">tab1-title</a></li>
<li><a href="#tab2">tab2-title</a></li>
...
</ul>
...
</div>
<div id="body">
<div id="tabs-content">
<div id="tab1">
...
</div>
<div id="tab2">
...
</div>
...
</div>
...
</div>
And the JS was simply: $('#tabs').tabs();
Now, it appears that the tabs list must immediately precede the tabs
themselves, as seen on the demo website:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
...
</div>
<div id="tabs-2">
...
</div>
<div id="tabs-3">
...
</div>
</div>
Is there a way to put the tab list back outside the div container?