且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

JQuery UI选项卡导致屏幕“跳转”

更新时间:2023-01-05 20:01:00

如果您要设置制表符过渡动画(即 .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.