我正在使用jQuery UI的标签来划分页面上的内容.我有一个“链接栏”我希望挂在每个标签的底部. (选项卡文本将更改,但通常它们将向左或向右导航用户选项卡.)
在第一个选项卡中托管#linkBar div使其“看起来”正确,位于Themeroller的边框内.将它放在“父标签”div之外,将链接放在主题边框下方.我已经尝试创建了一个spacer div,但它只是进一步推动了#linkBar.
当然,当用户切换到另一个选项卡时,链接栏就会消失.标签之间如何组织元素的所有权？我应该动态销毁正在导航的选项卡上的#linkBar div,并在导航到的选项卡中重建它吗？或者有更好的方法在它们之间移动它,或者只是管理可见性？
我想让链接栏按照每个标签上的内容作为页脚,在每个标签的最后一个内容下面“浮动”一行或两行(而不是将其放在相对于标签栏的固定位置).
最佳答案
好的……它只是将jQuery UI类添加到linkBar. Check out my working jsFiddle demo:
我将linkBar div移出tabOne div并将其放在tabs 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中管理它.
