在jQuery UI选项卡之间共享元素？

Question

我正在使用jQuery UI的标签来划分页面上的内容。我有一个“链接栏”我希望挂在每个标签的底部。 （标签文本将更改，但通常它们会向左或向右导航用户。）

在第一个标签内托管#linkBar div，使其在Themeroller的边框内“看起来”正确。将它放在“父标签”div之外，将链接放在主题边框下方。我已经尝试过创建一个spacer div，但它只是进一步推动#linkBar。

当然，当用户切换到另一个标签时，链接栏会消失。标签之间如何组织元素的所有权？我应该动态销毁正在导航的选项卡上的#linkBar div，并在导航到的选项卡中重建它吗？或者是否有更好的方法在它们之间移动它，或只是管理可见性？

我想让链接栏按照每个标签上的内容作为页脚，在每个标签的最后一个内容下面“浮动”一行或两行（而不是将其放在相对于标签栏的固定位置）

Answer 1

好的......它只是将jQuery UI类添加到linkBar。的 Check out my working jsFiddle demo:

我将linkBar div移出tabOne div并将其放在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;
}

然后我只是将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 div即可。但是，我认为我更喜欢在JS中管理它。