在jQuery UI選項卡之間共享元素？

Question

我使用jQuery UI的選項卡來劃分我的頁面上的內容。我有一個'鏈接欄'，我想掛在每個標籤的底部。 （標籤文本將會改變，但通常他們會通過標籤向左或向右導航用戶。）

在第一個選項卡內託管#linkBar div使其看起來是正確的，位於Themeroller邊界內。將它放在「父標籤」div的外面，可將鏈接放置在主題邊界下方。我試過創建一個隔離區div，但它只是推動#linkBar進一步。

當然，當用戶切換到另一個選項卡時，鏈接欄將消失。標籤之間如何組織所有權？我是否應該動態銷燬正在導航的標籤上的#linkBar div，並在導航到的標籤中重建它？或者有更好的方法在它們之間移動它，或者只是管理可視性？

我希望鏈接欄按照每個標籤上的內容作爲頁腳，在每個標籤的最後一個內容下面「懸浮」一行或兩行（而不是將它放在相對於標籤欄的固定位置）。

Answer 1

好的......這只是將jQuery UI類添加到linkBar。 Check out my working jsFiddle demo:

我感動linkBar DIV出tabOne股利，並把它放在tabs div的底部：

<div id="container"> 
    <div id="title"> 
     <h1>title bar</h1> 
    </div> 
    <div id="tabs"> 
     <ul> 
      <li><a href="#tabone">one</a></li> 
      <li><a href="#tabtwo">two</a></li> 
      <li><a href="#tabthree">three</a></li> 
     </ul> 
     <div id="tabone"> 
      content goes here 
      <br><br><br><br>more stuff<br><br><br>more stuff<br><br> 
     </div>  
     <div id="tabtwo"> 
      content goes here... 
     </div> 
     <div id="tabthree"> 
      content goes here... 
     </div> 
     <div id="linkBar"> 
      <span id="leftLink"><< left link</span> 
      <span id="rightLink">right link >></span> 
     </div> 
    </div> 
</div> 

我稍微給它一個頂部和底部改變了linkBar風格保證金以及默認隱藏：

#linkBar { 
    display: none; 
    margin: 10px auto; 
} 

然後我簡化y將jQuery UI類添加到$linkBar。我稍微改變了jQuery更可讀：

$("#accordion").accordion({ header: "h3" }); 

var $tabs = $("#tabs"), 
    $linkBar = $("#linkBar"); 

$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom"); 
$linkBar.show(); 
$tabs.tabs(); 

$('#title').click(function() { 

    $tabs.tabs('select', 0); 
    return false; 

}); 

注意：您可以只添加class="ui-tabs-panel ui-widget-content ui-corner-bottom"到linkBar股利和用它做。但是，我認爲我更喜歡在JS中管理它。