JQuery 탭 : 탭과 내용을 다른 컨테이너에 저장할 수 있습니까?

Question

헤더에 탭을 넣으려고하지만 인접한 컨테이너의 내용을 제어하려고합니다. 두 개의 탭 + 콘텐츠가 동일한 DIV 태그 내에 중첩되지 않은 경우 가능합니까? 예를 들어 아래

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

Answer 1

점검 비슷한 옵션을 기대하고 바랍니다.

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