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

如何解决在jQuery UI选项卡之间共享元素？

| 我正在使用jQuery UI的标签来划分页面上的内容。我有一个“链接栏”，我想挂在每个标签的底部。 （选项卡文本将更改，但通常它们将在选项卡上向左或向右导航用户。） 将#linkBar div托管在第一个选项卡中使其在Themeroller的边框内具有\“ look \”的外观。将其放在“父选项卡” div的外面，即可将链接放置在主题边框的下方。我尝试创建一个spacer div，但它只是将#linkBar进一步往下推。 当然，当用户切换到另一个选项卡时，链接栏会消失。标签之间的元素所有权如何组织？我是否应该动态销毁正在远离导航的选项卡上的#linkBar div并在正在导航至的选项卡上对其进行重建？还是有更好的方法在它们之间移动它，或者只是管理可见性？ 我希望链接栏作为页脚跟随每个选项卡上的内容，在每个选项卡的最后一个内容下方“浮动”一两行（而不是相对于选项卡栏固定位置）。     

解决方法

        好的...这只是将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>

我通过给ѭ0样式设置了顶部和底部边距以及默认情况下隐藏了它来略微改变了它：

#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;

});

注意：您可以在

linkBar

div中添加

class=\"ui-tabs-panel ui-widget-content ui-corner-bottom\"

并完成此操作。但是，我想我喜欢在JS中更好地管理它。