JQuery UI选项卡导致屏幕“跳转” [英] JQuery UI Tabs Causing Screen to "Jump"

问题描述

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

I'm using the latest version of the jQuery UI tabs. I have tabs positioned toward the bottom of the page.

每次点击标签页时，屏幕都会跳到顶部。

Every time I click a tab, the screen jumps toward the top.

如何防止这种情况发生发生了？

How can I prevent this from happening?

请看这个例子：

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

推荐答案

如果您要设置制表符过渡动画（即 .tabs（{fx：{opacity：'toggle'}}）; ） ，然后就是这里发生的事情：

If you're animating your tab transitions (ie. .tabs({ fx: { opacity: 'toggle' } });), then here's what's happening:

在大多数情况下，跳跃不是由＃链接后的浏览器引起的。页面跳转是因为在两个选项卡窗格之间的动画中点，两个选项卡窗格都是完全透明和隐藏的（如显示：无），因此整个选项卡部分的有效高度瞬间变为零。

In most cases, the jumping isn't caused by the browser following the '#' link. The page jumps because at the midpoint of the animation between the two tab panes, both tab panes are fully transparent and hidden (as in display: none), so the effective height of the whole tabbed section becomes momentarily zero.

如果零高度选项卡部分导致页面缩短，那么页面似乎会跳起来补偿，而实际上它只是调整大小以适应（暂时）更短的内容。有意义吗？

And if a zero-height tabbed section causes the page to be shorter, then the page will appear to jump up to compensate, when in reality it's simply resizing to fit the (momentarily) shorter content. Makes sense?

解决此问题的最佳方法是为选项卡式部分设置固定高度。如果这是不合需要的（因为你的标签内容的高度不同），那么请改用它：

The best way to fix this is to set a fixed height for the tabbed section. If this is undesirable (because your tab content varies in height), then use this instead:

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');
    }
});

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

It will set the computed height of the pane before the tab transition. Once the new tab has appeared, the height is set back to 'auto'. Overflow is set to 'hidden' to prevent content from breaking out of the pane when going from a short tab to a taller one.

这对我有用。希望这会有所帮助。

This is what worked for me. Hope this helps.

这篇关于JQuery UI选项卡导致屏幕“跳转”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！