使用URI哈希來識別標籤時防止滾動

Question

我正在使用JQuery UI在我的應用程序中製作標籤。我需要可以鏈接的標籤（直接鏈接打開頁面並選擇正確的標籤）。這是通過使用散列標記/ fragmented identifier完成的。但是，當標籤上方和標籤內的內容很長時，我遇到了一個問題。

單擊選項卡時，頁面向下滾動到選項卡的開頭。這不是我想要的。

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

javascript/jquery代碼是除了事件「tabsshow」之外的標準Jquery UI選項卡。這表明在Changing location.hash with jquery ui tabs（＃1題）和JQuery UI Tabs: Updating URL with hash while clicking the tab（博客 - 由Robin科技日記）

$(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可以用來測試行爲

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> 
<div style="height: 400px;">Some other content</div> 
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all"> 
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
     <li class="ui-state-default ui-corner-top"><a href="#tab_1"><span>Tab 1</span></a></li> 
     <li class="ui-state-default ui-corner-top"><a href="#tab_100"><span>Tab 100</span></a></li> 
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tab_1000"><span>Tab 1000</span></a></li> 
    </ul> 

    <div id="tab_1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"> 
     <table style="height: 1000px"><tr><td>Hello. This is tab 1</td></tr></table> 
    </div> 


    <div id="tab_100" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"> 
     <table style="height: 1000px"><tr><td>Hello. This is tab 100.</td></tr></table> 
    </div> 


    <div id="tab_1000" class="ui-tabs-panel ui-widget-content ui-corner-bottom"><h2>Heading</h2> 
     <table style="height: 1000px"><tr><td>Hello. This is tab 1000.</td></tr></table> 
    </div> 
</div> 

當下面打開的頁面URL，應該打開標籤1並且不向下滾動到標籤開始的位置。點擊其中一個標籤也是一樣。

file.html#tab_1 

Answer 1

這可能不是最好的方法，但是如果你的標籤已創建後，再加入哈希與原有ID將無法滾動頁面命名所有的ID的。我使用這種方法，因爲即使禁用了JavaScript，散列也會將用戶帶到正確的ID。這是下面的代碼a demo：

$("#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

你必須改變窗口哈希無需滾動頁面。這已經是一個關於SO - Modifying document.location.hash without page scrolling的問題。

所需的變化是：

$("#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 = $('<div></div>') 
       .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 3

我剛添加以下到我的javascript：

$('#tabs').tabs(); 
    // Direct links to the tabs, e.g. /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 does not work in Chrome, nor do suggested workarounds

Answer 4

我試圖@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 5

正如其他人所說，從@Mottie代碼可能有一次在舊版本的jQuery用戶界面的工作，但這個肯定已經停止工作。 jQuery的UI選項卡API已經改變了不少，因爲那是這麼寫的這裏有一個更新的版本至少1.10.2 jQuery的

演示這裏的工作原理：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 6

我使用jQuery 1.11 0.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 tabs, update url when clicking on a different tab

感謝Jeff B這裏http://jsfiddle.net/jtbowden/ZsUBz/44/

Answer 7

這種簡單的方法爲我工作指着我說：

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

Answer 8

有此頁面上的許多答案，在我心中，大多數都是過分簡單的問題。

基本上，從大衛托馬斯的解決方案是最簡單和最有效的。基本上，你想要做的就是防止標籤鏈接上的默認鏈接行爲（<a>標籤）。

了相同的答案適用於引導選項卡，在這裏你必須指定單擊處理

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