Question

默认情况下，jQuery UI Tabs插件需要这样的标记结构：

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

意味着有一个顶级容器（在本例中为“tabs”），其中包含一个ul和几个div，允许使用简单的

激活选项卡

$(function() {
    $( "#tabs" ).tabs();
});

然而，这对我来说是不可接受的，因为我需要一个更复杂的结构。也就是说，ul包含在内（和其他元素一起）在另一个容器div中，而面板又在另一个容器div中：

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

我现在想要容器-1中的ul为面板内的div提供选项卡。怎么可能？

jQuery UI选项卡：非标准标记结构

0 个答案: