使用URI哈希识别选项卡时阻止滚动

我正在使用JQuery UI在我的应用程序中制作标签。 我需要标签是可链接的（直接链接打开页面并选择正确的标签）。 这是通过使用散列标记/ 分段标识符来完成的 。 但是当标签上方和标签内的内容很长时，我遇到了问题。

单击选项卡时，页面向下滚动到选项卡的开头。 这不是我想要的。

我正在使用Jquery 1.7.1和Jquery UI 1.8.16。

javascript / Jquery代码是标准的Jquery UI选项卡，添加了事件“tabsshow”。 这在使用jquery ui标签更改location.hash （Stackoverflow问题）和JQuery UI标签时建议：点击标签时更新带有哈希的URL （博客 – 罗宾的技术日记）

$(document).ready(function() { $("#tabs").tabs(); /** * Add hash to URL of the current page * * http://chwang.blogspot.com/2010/02/jquery-ui-tabs-updating-url-with-hash.html * https://stackoverflow.com/questions/570276/changing-location-hash-with-jquery-ui-tabs */ $("#tabs").bind('tabsshow',function(event, ui) { window.location.hash = ui.tab.hash; }); }); 

以下HTML可用于测试行为

   
Some other content
 
 
 
Tab 1
 
Tab 100
 
Tab 1000
 
 
 
Hello. This is tab 1
 
 
 
Hello. This is tab 100.
 
 
Heading
 
Hello. This is tab 1000.
 
  

使用以下URL打开页面时，应打开选项卡1，而不是向下滚动到选项卡启动的位置。 点击其中一个标签也是如此。

 file.html#tab_1 

Answer 1

这可能不是最好的方法，但如果在创建选项卡后重命名所有ID，则添加具有原始ID的哈希将不会滚动页面。 我使用此方法是因为即使禁用了javascript，哈希也会将用户带到正确的ID。 以下是代码的演示 ：

 $("#tabs").tabs({ create: function(event, ui) { // get tab plugin data var tabs = $('#tabs').data('tabs'), // tabs.anchors contains all of the tab anchors links = tabs.anchors; // tabs.panels contains each tab tabs.panels.each(function(i){ // just adding a "mod_" prefix to every ID/hash this.id = 'mod_' + this.id; links[i].hash = '#' + this.id; }); } }); /** * Add hash to URL of the current page * * http://chwang.blogspot.com/2010/02/jquery-ui-tabs-updating-url-with-hash.html * http://stackoverflow.com/questions/570276/changing-location-hash-with-jquery-ui-tabs */ $("#tabs").bind('tabsshow', function(event, ui) { // remove the prefix from the ID, so we're showing the original ID in the hash window.location.hash = ui.tab.hash.replace('mod_', ''); }); 

Answer 2

我正在使用jQuery 1.11.1。 这对我很好。

 $("#tabs").tabs(); //initialize tabs $(function() { $("#tabs").tabs({ activate: function(event, ui) { var scrollTop = $(window).scrollTop(); // save current scroll position window.location.hash = ui.newPanel.attr('id'); // add hash to url $(window).scrollTop(scrollTop); // keep scroll at current position } }); }); 

jQuery UI选项卡，单击其他选项卡时更新URL

感谢Jeff B指点我这里http://jsfiddle.net/jtbowden/ZsUBz/44/

Answer 3

正如其他人提到的那样，来自@Mottie的代码可能曾经在旧版本的jQuery UI上工作，但这肯定停止了工作。 jQuery UI Tabs api已经改变了很多，因为这是写的所以这里是一个更新版本至少与jQuery 1.10.2一起使用

在这里演示： http ： //jsfiddle.net/xsx5u5g2/

 var $tabs = $("#tabs"); $tabs.tabs({ create: function(event, ui) { // Adjust hashes to not affect URL when clicked. var widget = $tabs.data("uiTabs"); widget.panels.each(function(i){ this.id = "uiTab_" + this.id; // Prepend a custom string to tab id. widget.anchors[i].hash = "#" + this.id; $(widget.tabs[i]).attr("aria-controls", this.id); }); }, activate: function(event, ui) { // Add the original "clean" tab id to the URL hash. window.location.hash = ui.newPanel.attr("id").replace("uiTab_", ""); }, }); 

Answer 4

您必须更改窗口哈希而不滚动页面。 这里已经是一个关于SO的问题 – 修改document.location.hash而没有页面滚动 。

所需的更改是：

 $("#tabs").bind('tabsshow',function(event, ui) { setHashWithoutScroll(ui.tab.hash); }); 

setHashWithoutScroll函数可以从上面提到的链接中获取。

 function setHashWithoutScroll(hash) { hash = hash.replace( /^#/, '' ); var fx, node = $( '#' + hash ); if ( node.length ) { node.attr( 'id', '' ); fx = $( '
' ) .css({ position:'absolute', visibility:'hidden', top: $(document).scrollTop() + 'px' }) .attr( 'id', hash ) .appendTo( document.body ); } document.location.hash = hash; if ( node.length ) { fx.remove(); node.attr( 'id', hash ); } } 

接受的答案会给我一个错误 – jQuery UI Tabs: Mismatching fragment identifier 。 所以我不得不使用这个。

Answer 5

我刚刚将以下内容添加到我的javascript中：

  $('#tabs').tabs(); // Direct links to the tabs, eg /my-page#tab-id can cause browsers // to scroll down to half-way down the page, which is ugly. We override that here. // (This can cause a brief FOUC effect where the page first displays then scrolls up) window.scrollTop = '0'; window.scrollTo(0,0); 

在MSIE中，当页面加载部分向下滚动时，我得到一个简短的FOUC效果，然后轻弹到顶部。

在Firefox中，这没有任何可见的FOUC工作正常。

在Chrome中，这根本不起作用 – 请参阅scrollTop在Chrome中不起作用，也不建议使用变通方法

Answer 6

这个简单的方法对我有用：

 /* Prevent scroll to tab on click */ $(document).ready(function(){ $("a.ui-tabs-anchor").click(function(e){ e.preventDefault(); return false; }); }); 

Answer 7

我试过@mottie解决方案，但现在不工作（2年后）。
它会触发错误： TypeError: tabs is undefined 。

以下是我可接受的解决方案：

 // preventing scroll // $("#tabs li a[href^='#tab']").bind('click',function(e){ // less general but better $("#tabs li a").bind('click',function(e){ $("html, body").animate({ scrollTop: 0 }); }); 

Answer 8

这个页面上有很多答案，在我看来，大多数答案都过于复杂。

基本上，大卫托马斯的解决方案是最简单和最有效的。 实质上，您要做的就是阻止选项卡链接（ 标签）上的默认链接行为。

相同的答案适用于引导选项卡，您必须在其中指定单击处理程序

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