JQuery选项卡：选项卡和内容可以位于不同的容器中吗？

我试图将标签放在标题中，但希望它们控制相邻容器中的内容。如果两个Tabs + Content都不嵌套在相同的DIV标签中，这可能吗？JQuery选项卡：选项卡和内容可以位于不同的容器中吗？

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

<header> 
    <div class="tabs"> 
     <ul> 
      <li><a href="#links">Links</a></li> 
      <li><a href="#filters">Filter</a></li> 
     </ul> 
    </div> 
</header> 

<div id="container" class="tabs"> 

    <div id="links"> 
     Stuff in here 
    </div> 

    <div id="filters"> 
     Stuff in here 
    </div> 

</div>

来源

2015-01-13 noy-hadar

我一直在试图一整天yesterda年。发布的代码是我的尝试。当标签/内容分离时，应该隐藏的内容全部可见，并且相互堆叠在一起。 @charlietfl –

检查下面的例子希望大家期待类似的选项。

HTML

<div id="pagewraper"> 
    <header> 
    <ul class="menu"> 
     <li><a href="#tabs-1">Menu one</a></li> 
     <li><a href="#tabs-2">Menu two</a></li> 
     <li><a href="#tabs-3">Menu three</a></li> 
    </ul> 
    </header> 

    <div id="container"> 
    <div id="tabs-1"> 
     <p>Tab one content</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Tab two content</p> 
    </div> 
    <div id="tabs-3"> 
     <p>Tab three content</p> 
    </div> 
    </div> 
</div>

CSS

ul.menu{ 
    margin:0; 
    padding:0; 
} 
ul.menu li{ 
    display: inline-block; 
} 
ul.menu li a{ 
    display: block; 
    padding: 10px; 
    background: #333; 
    color: #fff; 
}

jQuery的

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

JSFIDDLE DEMO

来源

2015-01-13 16:14:46 shanidkv

JQuery选项卡：选项卡和内容可以位于不同的容器中吗？

回答

相关问题