答案 0 :(得分：72)
如果您要设置标签转换的动画（例如。.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');
}
});
它将在制表符转换之前设置窗格的计算高度。出现新标签后，高度将重新设置为“自动”。溢出设置为“隐藏”，以防止从短标签转到较高标签时内容从窗格中突破。
这对我有用。希望这会有所帮助。
答案 1 :(得分：15)
如果您有这些方面的内容：
<a href="#" onclick="activateTab('tab1');">Tab 1</a>尝试在标签激活命令后添加return false;：
<a href="#" onclick="activateTab('tab1'); return false;">Tab 1</a>答案 2 :(得分：5)
我的猜测是你正在设置标签转换的动画？我遇到了同样的问题，每次点击页面滚动都会跳回到顶部。
我在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);
});
我会发布更多进展。
答案 3 :(得分：5)
我得到了解决方案......
如何在单击标签时停止屏幕跳跃：
将包含选项卡的div包装在具有固定高度的div中。
答案 4 :(得分：4)
我遇到了与jquery ui菜单相同的问题 - 锚点击事件上的preventDefault（）会阻止页面滚动回到顶部：
$("ul.ui-menu li a").click(function(e) {
e.preventDefault();
});
答案 5 :(得分：4)
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效果。
答案 6 :(得分：3)
尝试使用event.preventDefault();。在切换选项卡的click事件上。我的功能如下：
$(function() {
var $tabs = $('#measureTabs').tabs();
$(".btn-contiue").click(function (event) {
event.preventDefault();
$( "#measureTabs" ).tabs( "option", "active", $("#measureTabs").tabs ('option', 'active')+1 );
});
});
答案 7 :(得分：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
还有其他建议吗？
答案 8 :(得分：2)
尝试使用css为每个标签内容区域（而不是标签本身）添加最小高度。这为我解决了这个问题。 ：）
答案 9 :(得分：1)
我更喜欢在我的链接中使用href =“＃”而不将用户带到任何地方，但只要添加onclick =“return false;”就可以执行此操作。我想，密钥不是将用户发送到“＃”，这取决于浏览器似乎默认为当前页面的顶部。
答案 10 :(得分：1)
我从this page的评论中发现了一种更简单的方法，就是简单地删除href =“＃”，它就不会再跳到顶端了！我验证了它对我有用。干杯
答案 11 :(得分：1)
> 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
请注意，没有使用动画。
答案 12 :(得分：0)
用href =“javascript：void（0）;”替换href =“＃”;在'a'元素
100％
答案 13 :(得分：0)
我遇到了同样的问题，而且我自己也在旋转，所以如果你在页面的底部，浏览器窗口会向上滚动。标签容器的固定高度适合我。有点奇怪的是，如果你离开窗户或标签然后回去，它仍然会滚动。但不是世界末日。
答案 14 :(得分：0)
我遇到了这样的问题。我的代码是：
$("#tabs").tabs({
hide: {
effect: "fade",
duration: "500"
},
show: {
effect: "fade",
duration: "500"
}
});
我只是删除了show，它就像一个魅力！
$("#tabs").tabs({
hide: {
effect: "fade",
duration: "500"
}
});
答案 15 :(得分：0)
我发现在我的情况下，标签href=#example1导致页面跳转到id的位置。为标签添加固定高度没有区别，所以我刚刚添加：
$('.nav-tabs li a').click( function(e) {
e.preventDefault();
});
答案 16 :(得分：-2)
你有没有尝试过：
fx: {opacity:'toggle', duration:100}