JQuery UI选项卡导致屏幕"跳转"

Question

我正在使用最新版本的jQuery UI选项卡.我的标签位于页面底部.

每次单击选项卡时,屏幕都会跳到顶部.

我怎样才能防止这种情况发生？

请看这个例子:

http://5bosses.com/examples/tabs/sample_tabs.html

Answer 1

如果你正在为你的标签转换设置动画(即..tabs({ fx: { opacity: 'toggle' } });),那么这就是正在发生的事情:

在大多数情况下,跳转不是由"#"链接后的浏览器引起的.页面跳转是因为在两个选项卡窗格之间的动画中点,两个选项卡窗格都是完全透明和隐藏的(如display:none),因此整个选项卡部分的有效高度瞬间变为零.

如果零高度选项卡部分导致页面更短,那么页面似乎会跳起来补偿,而实际上它只是调整大小以适应(暂时)更短的内容.说得通？

解决此问题的最佳方法是为选项卡式部分设置固定高度.如果这是不合需要的(因为您的标签内容的高度不同),请改用:

jQuery('#tabs').tabs({
    fx: { opacity: 'toggle' },
    select: function(event, ui) {
        jQuery(this).css('height', jQuery(this).height());
        jQuery(this).css('overflow', 'hidden');
    },
    show: function(event, ui) {
        jQuery(this).css('height', 'auto');
        jQuery(this).css('overflow', 'visible');
    }
});

它将在选项卡转换之前设置窗格的计算高度.出现新标签后,高度将重新设置为"自动".溢出设置为"隐藏"以防止内容从短选项卡转到较高选项卡时从窗格中突破.

这对我有用.希望这可以帮助.

Answer 2

如果你有这些方面的东西:

<a href="#" onclick="activateTab('tab1');">Tab 1</a>

尝试return false;在tab激活命令后添加:

<a href="#" onclick="activateTab('tab1'); return false;">Tab 1</a>

Answer 3

我的猜测是你正在设置标签转换的动画？我遇到了同样的问题,每次点击页面滚动都会跳回到顶部.

我在jquery源代码中找到了这个:

 // Show a tab, animation prevents browser scrolling to fragment,

果然,如果我有这个:

$('.tab_container > ul').tabs();    
$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });

我的代码跳到顶部并且很烦人(但有动画).如果我改变它:

$('.tab_container > ul').tabs();    
//$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });

没有标签动画,但在标签之间切换是顺利的.

我找到了一种方法让它向后滚动,但这不是一个正确的修复,因为浏览器仍然在单击选项卡后跳到顶部.滚动发生在事件tabsselect和tabsshow之间,因此以下代码跳回到您的选项卡:

var scroll_to_x = 0;
var scroll_to_y = 0;
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
    scroll_to_x = window.pageXOffset;
    scroll_to_y = window.pageYOffset;
});
$('.ui-tabs-nav').bind('tabsshow', function(event, ui) {
    window.scroll(scroll_to_x, scroll_to_y);
});

我会发布更多的进展.

Answer 4

我得到了解决方案......

如何在单击选项卡时停止屏幕跳跃:

将包含选项卡的div包装在具有固定高度的div中.

请参阅此处的示例:http://5bosses.com/examples/tabs/sample_tabs.html