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

Question

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

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

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

请看这个例子：

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

score 75 · Accepted Answer

如果您正在为您的标签转换设置动画（即。.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');
    }
});

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

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

score 15 · Accepted Answer

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

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

尝试return false;在标签激活命令后添加：

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

score 5 · Accepted Answer

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.

score 5 · Accepted Answer

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

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

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

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

score 4 · Accepted Answer

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

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

score 4 · Accepted Answer

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效果。

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

谢谢你的帮助。好建议，但我之前尝试过，但没有运气。我认为 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

还有其他建议吗？

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

> 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

请注意，没有使用动画。

score 1 · Accepted Answer

我从这个页面上的评论中发现了一种更简单的方法，就是简单地删除 href="#"，它就不会再跳到顶部了！我验证了它对我有用。干杯

score 0 · Accepted Answer

我遇到了同样的问题，而且我的也是自己旋转的，所以如果你在页面底部，浏览器窗口会向上滚动到顶部。为标签容器设置固定高度对我有用。有点奇怪的是，如果您离开窗口或选项卡并返回，它仍然会滚动。不过，这不是世界末日。

score 0 · Accepted Answer

0

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

工作 100%

于 2010-08-25T08:40:19.217 回答

score 0 · Accepted Answer

我发现在我的情况下，选项卡href=#example1导致页面跳转到id. 向选项卡添加固定高度没有任何区别，所以我只是添加了：

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

score -2 · Accepted Answer

-2

你试过了吗：

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

于 2010-10-04T12:58:41.113 回答

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

17 回答 17

Related

Reference