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

Question

我使用 jQuery UI 的选项卡来划分页面上的内容。我有一个“链接栏”，我想挂在每个选项卡的底部。 （选项卡文本会发生变化，但通常它们会通过选项卡向左或向右导航用户。）

在第一个选项卡内托管 #linkBar div 使其在 Themeroller 的边框内“看起来”正确。将其放在“父选项卡”div 的外部会将链接放置在主题边框下方。我尝试创建一个间隔 div，但它只是将 #linkBar 进一步向下推。

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

我想让链接栏作为页脚跟随每个选项卡上的内容，“浮动”每个选项卡最后内容下方的一两行（而不是将其放置在相对于选项卡栏的固定位置）。

Answer 1

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

我将 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< /code> 通过给它一个顶部样式和底部边距以及默认隐藏它：

#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 中更好地管理它。