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選項卡：選項卡和內容可以位於不同的容器中嗎？

回答

相關問題