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

Question

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

每当我点击一个标签，屏幕就会跳到顶部。

我该如何防止这种情况发生？

请看下面的例子：

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

Answer 1

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

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

使用这个标签激活命令后加入return false;：

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

Answer 2

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

任何其他建议？

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

> 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

注意，没有被使用的动画。

Answer 5

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

如何从被点击选项卡时跳起来停止屏幕：

包裹包含在一个固定的高度一个div标签股利。

见这里的例子：http://5bosses.com/examples/tabs/sample_tabs.html

Answer 6

还有一个更简单的方法，这是我从评论上发现this page是简单地删除的href =“＃”，它不会跳到顶端更多！我验证了它对我有用。干杯

Answer 7

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

Answer 8

我有同样的问题，加上我自己旋转，所以如果你在页面的底部，浏览器窗口将滚动到顶部。有一个固定的标签容器高度为我工作。一种奇怪的事情仍然是，如果你离开窗口或标签并返回，它仍然会滚动。虽然不是世界末日。

Answer 9

如果你在你的动画过渡标签（即.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 10

用href =“javascript：void（0）;”替换href =“＃”在“一”元素

工程100％

Answer 11

你有没有tryed：

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

Answer 12

迈克的解决方案表现出的原则，极大地但它有一个很大的缺点 - 如果结果网页是短，屏幕上会无论如何跳到顶部！唯一的解决办法是记住scrollTop，并在切换标签后将其恢复为。但恢复前，放大页面（HTML标签） appropriatelly：

（编辑 - 修改新的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效果了。

Answer 13

尝试使用css添加每个标签内容区域（而不是标签本身）的最小高度。这为我修好了。 :)

Answer 14

我与jQuery的用户界面的菜单同样的问题 - 在锚上的点击事件的preventDefault（）从滚动回到顶端停止页：

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

Answer 15

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

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

Answer 16

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

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

我只是删除show和它的工作就像一个魅力！

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

Answer 17

我在我的案例中发现的标签href=#example1是导致页面跳转到id的位置。添加一个固定高度的标签并没有区别，所以我只是说：

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