jQuery UI Tabs: Non-standard markup structure
The jQuery UI Tabs plugin by default expects a markup structure like thi开发者_运维问答s:
<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">
<p>Content 1</p>
</div>
<div id="tabs-2">
<p>Content 2</p>
</div>
<div id="tabs-3">
<p>Content 3</p>
</div>
</div>
meaning that there is a top-level container ("tabs" in this case) with a ul inside it and several divs, allowing tab activation with a simple
$(function() {
$( "#tabs" ).tabs();
});
However, this is unacceptable for me since I need a more complex structure. Namely, the ul is contained (along with other elements) inside another container div, and the panels are inside yet another one:
<div id="tabs">
<div id="container-1">
<div id="inside"></div>
<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>
<div id="panels">
<div id="tabs-1">
<p>Content 1</p>
</div>
<div id="tabs-2">
<p>Content 2</p>
</div>
<div id="tabs-3">
<p>Content 3</p>
</div>
</div>
<div id="outside"></div>
</div>
I now want the ul inside container-1 to provide the tabs for the divs inside panels. How is that possible?
精彩评论