Prevenzione dello scorrimento quando si utilizza l'hash dell'URI per identificare la scheda

Question

Sto utilizzando l'interfaccia utente di JQuery per creare schede nella mia applicazione. Avevo bisogno che le schede fossero collegabili (collegamento diretto che apre la pagina e seleziona la scheda corretta). Questo viene fatto usando un tag hash/fragmented identifier. Ma ho un problema quando il contenuto sopra le schede e all'interno delle schede è molto lungo.

Quando si fa clic sulle schede, la pagina scorre verso il basso fino all'inizio della scheda. Questo non è quello che voglio.

Sto utilizzando Jquery 1.7.1 e Jquery UI 1.8.16.

Il codice javascript/Jquery è una scheda dell'interfaccia utente Jquery standard con l'aggiunta all'evento "tabsshow". Ciò è suggerito a Changing location.hash with jquery ui tabs (StackOverflow questione) e JQuery UI Tabs: Updating URL with hash while clicking the tab (blog - Tech Diario da 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; 
    }); 
}); 

Il seguente codice HTML può essere utilizzato per testare il comportamento

<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> 

Quando si apre la pagina con il seguente URL, si dovrebbe avere la scheda 1 aperta e non scorrere verso il basso fino a dove inizia la scheda. Lo stesso vale per fare clic su una delle schede.

file.html#tab_1 

Answer 1

questo potrebbe non essere il metodo migliore, ma se si rinomina tutti gli ID, dopo le schede sono state create, quindi l'aggiunta di un hash con l'ID originale non sarà scorrere la pagina. Ho usato questo metodo perché anche con javascript disabilitato, l'hash porterà l'utente all'ID corretto. Ecco a demo del codice qui sotto:

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

Devi cambiare l'hash finestra senza scorrere la pagina. Ecco già una domanda su SO - Modifying document.location.hash without page scrolling.

I cambiamenti richiesti sono:

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

La funzione setHashWithoutScroll può essere preso dal link sopra menzionato.

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); 
    } 
} 

La risposta accettata genera un errore per me - jQuery UI Tabs: Mismatching fragment identifier. Quindi ho dovuto usare questo.

Answer 3

Ho appena aggiunto il seguente al mio 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); 

In MSIE, ottengo una breve FOUC effetto il caricamento della pagina scorrere parte a senso unico verso il basso, poi colpi di frusta verso l'alto.

In Firefox, questo funziona perfettamente senza alcun FOUC visibile.

In Chrome, questo non funziona affatto - vedi scrollTop does not work in Chrome, nor do suggested workarounds

Answer 4

ho provato @mottie soluzione, ma attualmente non lavora (2 anni dopo).
Segnala un errore: TypeError: tabs is undefined.

seguito è una soluzione accettabile per me:

// 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

Come altri hanno menzionato il codice @Mottie potrebbe avere una volta lavorato su versioni precedenti di jQuery UI, ma questo ha sicuramente smesso di funzionare. L'API jQuery UI Tabs è cambiato un bel po 'dal momento che è stato scritto: ecco una versione aggiornata che funziona con almeno jQuery 1.10.2

Demo qui: 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

sto usando jQuery 1.11 .1. Funziona bene per me.

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

Grazie a Jeff B per avermi qui http://jsfiddle.net/jtbowden/ZsUBz/44/

Answer 7

Questo semplice metodo ha funzionato per me:

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

Answer 8

Ci sono molte risposte in questa pagina, e nella mia mente , la maggior parte sta complicando un semplice problema.

Fondamentalmente, la soluzione di david-thomas è la più semplice e più efficace. In sostanza, tutto ciò che si vuole fare è impedire il comportamento di collegamento predefinito su un collegamento a schede (tag <a>).

la stessa risposta vale per le schede bootstrap, in cui si deve specificare il gestore click

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