【问题讨论】：
标签： javascript jquery jquery-ui tabs jquery-ui-tabs
如果您正在为标签转换设置动画（即.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');
}
});
它将在选项卡转换之前设置窗格的计算高度。新标签出现后，高度将设置回“自动”。溢出设置为“隐藏”以防止在从短选项卡转到更高选项卡时内容超出窗格。
这对我有用。希望这会有所帮助。
【讨论】：
如果你有这些方面的东西：
<a href="#" onclick="activateTab('tab1');">Tab 1</a>尝试在标签激活命令后添加return false;：
<a href="#" onclick="activateTab('tab1'); return false;">Tab 1</a>【讨论】：
我的猜测是您正在为标签转换设置动画？我遇到了同样的问题，每次点击页面滚动都会跳回顶部。
我在 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);
});
我将发布我取得的更多进展。
【讨论】：
我得到了解决方案...
点击标签时如何阻止屏幕跳起：
将包含选项卡的 div 包裹在一个固定高度的 div 中。
【讨论】：
我在 jquery ui 的菜单上遇到了同样的问题 - 锚点的 click 事件上的 preventDefault() 会阻止页面滚动回顶部：
$("ul.ui-menu li a").click(function(e) {
e.preventDefault();
});
【讨论】：
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 效果。
【讨论】：
尝试使用event.preventDefault();。在切换选项卡的点击事件上。我的函数如下所示：
$(function() {
var $tabs = $('#measureTabs').tabs();
$(".btn-contiue").click(function (event) {
event.preventDefault();
$( "#measureTabs" ).tabs( "option", "active", $("#measureTabs").tabs ('option', 'active')+1 );
});
});
【讨论】：
感谢您的帮助。好建议，但我之前尝试过，但没有运气。我认为 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
还有其他建议吗？
【讨论】：
尝试使用 css 将最小高度添加到每个选项卡内容区域（而不是选项卡本身）。那为我修好了。 :)
【讨论】：
> 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
请注意，没有使用动画。
【讨论】：
我更喜欢在我的链接中使用 href="#"，这样不会将用户带到任何地方，但是只要添加 onclick="return false;" 就可以做到这一点。我猜，关键不是将用户发送到“#”，这取决于浏览器似乎默认为当前页面的顶部。
【讨论】：
我从this page 的cmets 中发现了一种更简单的方法，即简单地删除href="#"，它就不会再跳到顶部了！我验证了它对我有用。干杯
【讨论】：
我遇到了这样的问题。我的代码是：
$("#tabs").tabs({
hide: {
effect: "fade",
duration: "500"
},
show: {
effect: "fade",
duration: "500"
}
});
我只是删除了show，它就像一个魅力！
$("#tabs").tabs({
hide: {
effect: "fade",
duration: "500"
}
});
【讨论】：
我也遇到了同样的问题，而且我的是自己旋转的，所以如果你在页面底部，浏览器窗口会向上滚动到顶部。为标签容器设置固定高度对我有用。有点奇怪的是，如果您离开窗口或选项卡并返回，它仍然会滚动。不过，这不是世界末日。
【讨论】：
将 href="#" 替换为 href="javascript:void(0);"在“a”元素中
100% 有效
【讨论】：
我发现在我的情况下标签href=#example1 导致页面跳转到id 的位置。为选项卡添加固定高度没有任何区别，所以我只是添加了：
$('.nav-tabs li a').click( function(e) {
e.preventDefault();
});
【讨论】：
你试过了吗：
fx: {opacity:'toggle', duration:100}
【讨论】：