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

Question

我正在使用jQuery UI的标签来划分页面上的内容.我有一个"链接栏"我希望挂在每个标签的底部.(选项卡文本将更改,但通常它们将向左或向右导航用户选项卡.)

在第一个选项卡中托管#linkBar div使其"看起来"正确,位于Themeroller的边框内.将它放在"父标签"div之外,将链接放在主题边框下方.我已经尝试创建了一个spacer div,但它只是进一步推动了#linkBar.

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

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

Answer 1

好的...只是将 jQuery UI 类添加到 linkBar 中。 看看我的 jsFiddle 演示：

我将linkBardiv移出tabOnediv并将其放在div的底部tabs：

<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"到linkBardiv 即可完成。但是，我想我更喜欢在 JS 中更好地管理它。