JQuery UI选项卡导致屏幕“跳转”
我正在使用最新版本的JQuery UI选项卡。 我有标签定位在页面的底部。
每次我点击一个标签，屏幕就会跳到顶部。
我怎样才能防止这种情况发生？
看到这个例子：
http://5bosses.com/examples/tabs/sample_tabs.html
如果你正在animation你的标签转换（即.tabs({ fx: { opacity: 'toggle' } }); ），那么这是怎么回事：
在大多数情况下，跳转不是由“＃”链接之后的浏览器引起的。 页面跳转是因为在两个选项卡窗格之间的animation的中点，两个选项卡窗格都是完全透明和隐藏的（如display：none），因此整个选项卡区段的有效高度一度变为零。
如果一个零高度的标签页部分导致页面变短，那么这个页面就会跳起来进行补偿，实际上它只是resize以适应（短暂的）较短的内容。 说得通？
解决这个问题的最好方法是为选项卡部分设置一个固定的高度。 如果这是不可取的（因为你的标签内容高度不同），那就用这个代替：
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>
我得到了这个解决scheme…
如何在点击标签时停止屏幕跳跃：
将包含选项卡的div包装在具有固定高度的div中。
看到这里的例子：http: //5bosses.com/examples/tabs/sample_tabs.html
我的猜测是你正在animation你的标签转换？ 我有同样的问题，页面滚动跳回到顶部，每次点击。
我在jquery源代码中find了这个：
// Show a tab, animation prevents browser scrolling to fragment,
果然，如果我有这个：
$('.tab_container > ul').tabs(); $('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });
我的代码跳转到顶部，很烦人（但有animation）。 如果我改变这个：
$('.tab_container > ul').tabs(); //$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });
没有制表符animation，但切换标签是顺利的。
我find了一种方法来回滚，但它不是一个适当的修复，因为浏览器仍然跳转到顶部点击一个选项卡后。 滚动发生在事件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); });
我会发布我所做的更多进展。
Mike的解决scheme大大地展示了这个原理，但是它有一个很大的缺点 – 如果结果页面很短，屏幕将会跳到顶端！ 唯一的解决办法是记住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效果一起工作。
我有同样的问题与jquery ui的菜单 – 一个preventDefault（）锚的点击事件停止页面滚动回到顶部：
$("ul.ui-menu li a").click(function(e) { e.preventDefault(); });
尝试使用event.preventDefault(); 。 在切换选项卡的点击事件。 我的function如下所示：
$(function() { var $tabs = $('#measureTabs').tabs(); $(".btn-contiue").click(function (event) { event.preventDefault(); $( "#measureTabs" ).tabs( "option", "active", $("#measureTabs").tabs ('option', 'active')+1 ); }); });
谢谢你的帮助。 好的build议，但我没有运气之前尝试过。 我认为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
还有其他build议吗？
尝试使用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); });
谢谢你的帮助！ 请让我知道你还有什么发现。
上面的function工作（屏幕不能永久移动）…但是，点击屏幕是非常摇晃。
下面是一个简单的例子，显示了如何点击一个标签导致屏幕跳转到顶部（没有上述代码）：http: //5bosses.com/examples/tabs/sample_tabs.html
请注意，没有使用animation。
我更喜欢在我的链接中有一个href =“＃”，但是只要添加一个onclick =“return false;”就可以做到这一点。 我猜，关键是不把用户发送到“＃”，这取决于浏览器似乎默认为当前页面的顶部。
有一个更简单的方法，我发现这个页面上的评论是简单地删除href =“＃”，它不会跳转到顶部！ 我validation，它适用于我。 干杯
我有同样的问题，再加上我自己旋转，所以如果你在页面的底部，浏览器窗口将滚动到顶部。 有一个固定的标签容器的高度为我工作。 一种奇怪的事情仍然是，如果你离开窗口或标签回去，它仍然会滚动。 虽然不是世界末日。
用href =“javascript：void（0）;”replacehref =“＃” 在'a'元素中
作品100％
我有这样的问题。 我的代码是：
$("#tabs").tabs({ hide: { effect: "fade", duration: "500" }, show: { effect: "fade", duration: "500" } });
我只是删除show ，它像一个魅力工作！
$("#tabs").tabs({ hide: { effect: "fade", duration: "500" } });
我发现在我的情况下标签href=#example1是导致页面跳转到id的位置。 添加一个固定的高度的标签没有区别，所以我只是补充说：
$('.nav-tabs li a').click( function(e) { e.preventDefault(); });
你试过了吗：
fx: {opacity:'toggle', duration:100}
