当前位置： 文江博客话题详情

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

发布于 2024-07-08 12:42:54 字数 345 浏览 11 评论 0原文

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

每次我单击选项卡时，屏幕都会跳到顶部。

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

请参阅此示例：

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

原文

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?

Please see this example:

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（17）

韵柒 2024-07-15 12:42:54

如果您要对选项卡转换进行动画处理（即 .tabs({ fx: { opacity: 'toggle' } });），那么会发生以下情况：

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

如果零高度的选项卡式部分导致页面变短，则页面看起来会向上跳跃以进行补偿，而实际上它只是调整大小以适应（暂时）较短的内容。 说得通？

解决此问题的最佳方法是为选项卡部分设置固定高度。 如果这是不可取的（因为选项卡内容的高度不同），请改用它：

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

它将在选项卡转换之前设置计算出的窗格高度。 新选项卡出现后，高度将设置回“自动”。 溢出设置为“隐藏”，以防止内容从短选项卡转到较高选项卡时超出窗格。

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

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.

回复 原文
明月松间行 2024-07-15 12:42:54

如果您有以下内容：

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

尝试在选项卡激活命令后添加 return false;：

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

If you have something along these lines:

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

Try adding return false; after the tab activation command:

<a href="#" onclick="activateTab('tab1'); return false;">Tab 1</a>
回复 原文
鹿港小镇 2024-07-15 12:42:54

我的猜测是您正在为选项卡转换设置动画？ 我遇到了同样的问题，每次点击页面滚动都会跳回到顶部。

我在 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);
});

我将发布我取得的更多进展。

My guess is that you are animating your tab transitions? I am having the same problem, where the page scroll jumps back to the top with every click.

I found this in the jquery source:

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

Sure enough, if I have this:

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

my code jumps to the top and is annoying (but there's animation). If I change that to this:

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

there is no tab animation, but switching between tabs is smooth.

I found a way to make it scroll back, but it's not a proper fix, as the browser still jumps to the top after clicking a tab. The scroll happens between the events tabsselect and tabsshow, so the following code jumps back to your tab:

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

I'll post any more progress I make.

回复 原文
睫毛上残留的泪 2024-07-15 12:42:54

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

如何在单击选项卡时阻止屏幕跳跃：

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

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

I was given a solution for this...

How to stop screen from jumping up when tab is clicked:

Wrap the div that contains the tabs in a div with a fixed height.

See example here: http://5bosses.com/examples/tabs/sample_tabs.html

回复 原文
羅雙樹 2024-07-15 12:42:54

我对 jquery ui 的菜单有同样的问题 - 锚点的单击事件上的 PreventDefault() 会阻止页面滚动回顶部：

 $("ul.ui-menu li a").click(function(e) {
      e.preventDefault();
 });

I had the same problem with jquery ui's menu - a preventDefault() on the anchor's click event stops the page from scrolling back to the top:

 $("ul.ui-menu li a").click(function(e) {
      e.preventDefault();
 });
回复 原文
小梨窩很甜 2024-07-15 12:42:54

Mike的解决方案很好地演示了这一原理，但它有一个很大的缺点——如果生成的页面很短，屏幕无论如何都会跳到顶部！ 唯一的解决方案是记住scrollTop，并在选项卡切换后恢复它。 但在恢复之前，适当地放大页面（html标签）：（

编辑-针对新的Jquery UI API进行修改+针对大页面的小改进）

$(...).tabs({
    beforeActivate: function(event, ui) {
        $(this).data('scrollTop', $(window).scrollTop()); // save scrolltop
    },
    activate: function(event, ui) {
        if (!$(this).data('scrollTop')) { // there was no scrolltop before
            jQuery('html').css('height', 'auto'); // reset back to auto...
                    // this may not work on page where originally
                    // the html tag was of a fixed height...
            return;
        }
        //console.log('activate: scrolltop pred = ' + $(this).data('scrollTop') + ', nyni = ' + $(window).scrollTop());
        if ($(window).scrollTop() == $(this).data('scrollTop')) // the scrolltop was not moved
            return;                // nothing to be done
        // scrolltop moved - we need to fix it
        var min_height = $(this).data('scrollTop') + $(window).height();
            // minimum height the document must have to have that scrollTop
        if ($('html').outerHeight() < min_height) { // just a test to be sure
                            // but this test should be always true
            /* be sure to use $('html').height() instead of $(document).height()
               because the document height is always >= window height!
               Not what you want. And to handle potential html padding, be sure
               to use outerHeight instead!
                   Now enlarge the html tag (unfortunatelly cannot set
               $(document).height()) - we want to set min_height
               as html's outerHeight:
             */
            $('html').height(min_height -
                 ($('html').outerHeight() - $('html').height()));
        }
        $(window).scrollTop($(this).data('scrollTop')); // finally, set it back
    }
});

也适用于fx效果。

Mike's solution demonstrated the principle greatly but it has a big drawback - if the resultant page is short, the screen will jump to the top anyway! The only solution is to remember the scrollTop, and restore it after the tabs are switched. But before the restoration, enlarge the page (html tag) appropriatelly:

(edit - modified for new Jquery UI API + small improvement for large pages)

$(...).tabs({
    beforeActivate: function(event, ui) {
        $(this).data('scrollTop', $(window).scrollTop()); // save scrolltop
    },
    activate: function(event, ui) {
        if (!$(this).data('scrollTop')) { // there was no scrolltop before
            jQuery('html').css('height', 'auto'); // reset back to auto...
                    // this may not work on page where originally
                    // the html tag was of a fixed height...
            return;
        }
        //console.log('activate: scrolltop pred = ' + $(this).data('scrollTop') + ', nyni = ' + $(window).scrollTop());
        if ($(window).scrollTop() == $(this).data('scrollTop')) // the scrolltop was not moved
            return;                // nothing to be done
        // scrolltop moved - we need to fix it
        var min_height = $(this).data('scrollTop') + $(window).height();
            // minimum height the document must have to have that scrollTop
        if ($('html').outerHeight() < min_height) { // just a test to be sure
                            // but this test should be always true
            /* be sure to use $('html').height() instead of $(document).height()
               because the document height is always >= window height!
               Not what you want. And to handle potential html padding, be sure
               to use outerHeight instead!
                   Now enlarge the html tag (unfortunatelly cannot set
               $(document).height()) - we want to set min_height
               as html's outerHeight:
             */
            $('html').height(min_height -
                 ($('html').outerHeight() - $('html').height()));
        }
        $(window).scrollTop($(this).data('scrollTop')); // finally, set it back
    }
});

Works with the fx effect too.

回复 原文
甜柠檬 2024-07-15 12:42:54

尝试使用event.preventDefault();。 在切换选项卡的单击事件上。 我的函数如下所示：

    $(function() {
        var $tabs = $('#measureTabs').tabs();
        $(".btn-contiue").click(function (event) {
            event.preventDefault();
            $( "#measureTabs" ).tabs( "option", "active", $("#measureTabs").tabs   ('option', 'active')+1  );
        });
    });

Try using event.preventDefault();. On the click event which is switching the tabs. My function looks like this:

    $(function() {
        var $tabs = $('#measureTabs').tabs();
        $(".btn-contiue").click(function (event) {
            event.preventDefault();
            $( "#measureTabs" ).tabs( "option", "active", $("#measureTabs").tabs   ('option', 'active')+1  );
        });
    });
回复 原文
陌伤浅笑 2024-07-15 12:42:54

感谢您的帮助。 很好的建议，但我之前尝试过但没有成功。 我认为 JQuery UI 可能会压倒我的努力。

这是每个选项卡的代码：

<li class=""><a href="#fragment-2"><span>Two</span></a></li>

我已经尝试过但没有成功：

<li class=""><a href="#fragment-2" onclick="return false;"><span>Two</span></a></li>

这是一个简单的示例（不返回 false）： http://5bosses.com/examples/tabs/sample_tabs.html

还有其他建议吗？

Thanks for your help. Good suggestion, but I tried before with no luck. I think JQuery UI may be overriding my efforts.

Here is the code per tab:

<li class=""><a href="#fragment-2"><span>Two</span></a></li>

I already tried this with no success:

<li class=""><a href="#fragment-2" onclick="return false;"><span>Two</span></a></li>

Here is a simple example (without return false): http://5bosses.com/examples/tabs/sample_tabs.html

Any other suggestions?

回复 原文
坏尐絯℡ 2024-07-15 12:42:54

尝试使用 css 将最小高度添加到每个选项卡内容区域（而不是选项卡本身）。 这为我解决了。 :)

Try just adding a min-height using css to each of the tab content areas ( not the tabs themselves ). That fixed it for me. :)

回复 原文
北城挽邺 2024-07-15 12:42:54
> 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); });

感谢您的帮助！ 请告诉我您还发现了什么。

上述功能有效（屏幕不会永久移动）...但是，点击时屏幕非常摇晃。

这是一个简单的示例，显示单击选项卡如何导致屏幕跳向顶部（没有上面的代码）：
http://5bosses.com/examples/tabs/sample_tabs.html

请注意，没有使用动画。

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

Thanks for your help! Please let me know what else you find.

The above function works (screen doesn't move permanently)... but, the screen is very wobbly on click.

Here is a simple example showing how clicking a tabs causes the screen to jump toward the top (without the above code):
http://5bosses.com/examples/tabs/sample_tabs.html

Note that there's no animation being used.

回复 原文
許願樹丅啲祈禱 2024-07-15 12:42:54

我更喜欢在链接中添加 href="#"，这样不会将用户带到任何地方，但只要添加 onclick="return false;" 就可以做到这一点。 我想，关键是不要将用户发送到“#”，根据浏览器的不同，“#”似乎默认为当前页面的顶部。

I prefer to have an href="#" in my links that do not take the user anywhere, but you can do this as long as you add an onclick="return false;". The key, I guess, is not sending the user to "#", which depending on the browser seems to default as the top of the current page.

回复 原文
执笔绘流年 2024-07-15 12:42:54

我从此页面 就是直接去掉href="#"就不会再跳到顶部了！ 我验证了并且它对我有用。 干杯

There is a much more simple way which I discovered from the comments on this page that is to simply remove the href="#" and it will not jump to the top any more! I verified and it works for me. Cheers

回复 原文
一页 2024-07-15 12:42:54

我有这样的问题。 我的代码是：

$("#tabs").tabs({
  hide: {
    effect: "fade",
    duration: "500"
  },
  show: {
    effect: "fade",
    duration: "500"
  }
});

我只是删除了 show ，它就像一个魅力！

 $("#tabs").tabs({
      hide: {
        effect: "fade",
        duration: "500"
      }
 });

I had such a problem. My code was:

$("#tabs").tabs({
  hide: {
    effect: "fade",
    duration: "500"
  },
  show: {
    effect: "fade",
    duration: "500"
  }
});

I have simply removed show and it worked like a charm!

 $("#tabs").tabs({
      hide: {
        effect: "fade",
        duration: "500"
      }
 });
回复 原文
没︽人懂的悲伤 2024-07-15 12:42:54

我遇到了同样的问题，而且我的问题是自行旋转的，因此如果您位于页面底部，浏览器窗口将向上滚动到顶部。 选项卡容器的固定高度对我有用。 有点奇怪的是，如果您离开窗口或选项卡并返回，它仍然会滚动。 不过，这并不是世界末日。

I had the same problem, plus mine were rotating on their own so if you were at the bottom of the page, the browser window would be scrolled up tot he top. Having a fixed height for the tab container worked for me. Kind of a weird thing still is that if you leave the window or tab and go back, it will still scroll. Not the end of the world, though.

回复 原文
倾城花音 2024-07-15 12:42:54

将 href="#" 替换为 href="javascript:void(0);" 在 'a' 元素中

100% 有效

replace the href="#" with href="javascript:void(0);" in 'a' element

works 100%

回复 原文
铃予 2024-07-15 12:42:54

我发现在我的例子中，选项卡 href=#example1 导致页面跳转到 id 的位置。 为选项卡添加固定高度没有什么区别，所以我只是添加：

$('.nav-tabs li a').click( function(e) {
e.preventDefault();
});

I found in my case the tab href=#example1 was causing the page to jump to the position of the id. Adding a fixed height to the tabs made no difference so I just added:

$('.nav-tabs li a').click( function(e) {
e.preventDefault();
});

回复 原文
你的往事 2024-07-15 12:42:54

您尝试过吗：

fx: {opacity:'toggle', duration:100}

Did you tryed:

fx: {opacity:'toggle', duration:100}
回复 原文
~没有更多了~

关于作者

往事风中埋

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

内心激荡

文章 0 评论 0

JSmiles

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

左秋

文章 0 评论 0

迪街小绵羊

文章 0 评论 0

瞳孔里扚悲伤

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文