cambiando location.hash con le tabs ui di jquery

Ho cercato di trovare un modo per modificare window.location.hash nella scheda attualmente selezionata nelle tabs dell’interfaccia utente di Jquery .

Ho provato:

$("#tabs > ul").tabs(); $("#tabs > ul").bind("tabsshow", function(event, ui) { window.location.hash = ui.tab; }) 

Ciò comporta la modifica dell’hash a #undefined quando la scheda viene cambiata.

Ho anche provato:

 $("#tabs > ul").tabs({ select: function(event, ui) { window.location.hash = ui.tab } }); 

Ma questo non sembra essere innescato affatto.

Qualsiasi aiuto sarebbe apprezzato. Grazie.

Modifica: Sembra che parte del mio problema iniziale abbia qualcosa a che fare con js da qualche altra parte che interferisce con questo. Sia la risposta accettata che l’altra risposta suggerita leggermente modificata funzionano. Ringrazia tutti.

Nella tua funzione di gestore di eventi ui.tab è un elemento di ancoraggio. Puoi recuperare il suo valore hash come questo:

 $("#tabs > ul").tabs(); $("#tabs > ul").bind("tabsshow", function(event, ui) { window.location.hash = ui.tab.hash; }) 

Per te funziona?

 $('#tabs').tabs({ select: function(event, ui) { window.location.hash = ui.tab.hash; } }); 

Mentre alcune delle soluzioni di cui sopra funzionano, causano il salto della pagina in alcuni casi, poiché l’API window.location.hash è progettata per portarti in una parte specifica della pagina.

Questa soluzione accurata proposta qui risolve il problema

  $("#tabs").bind("tabsshow", function(event, ui) { history.pushState(null, null, ui.tab.hash); }); 

Questo ha funzionato per me, jQuery UI 1.10:

 $('#elexumaps_events_tabs').tabs({ activate: function(event, ui) { window.location.hash=ui.newPanel.selector; } }); 

Vedi anche: http://api.jqueryui.com/tabs/#event-activate

la mia soluzione semplice senza saltare:

  $("#tabs").tabs({ activate: function (event, ui) { var scrollPos = $(window).scrollTop(); window.location.hash = ui.newPanel.selector; $(window).scrollTop(scrollPos); } }); 

Questo sarebbe quello che stai andando?

 $("#tabs > ul").tabs({ select: function(event, ui) { window.location = "#" + ui.tab; } }); 
 $('#tabs').tabs({ select: function(event, ui){ window.location = ui.tab.href; } }); 

Molte delle risposte di cui sopra non funzionano con la versione corrente delle tabs dell’interfaccia utente jQuery. Ecco cosa sto attualmente usando:

 var tabsUi = $('#tabs'); tabsUi.tabs(); // Add hash to URL when tabs are clicked tabsUi.find('> ul a').click(function() { history.pushState(null, null, $(this).attr('href')); }); // Switch to correct tab when URL changes (back/forward browser buttons) $(window).bind('hashchange', function() { if (location.hash !== '') { var tabNum = $('a[href=' + location.hash + ']').parent().index(); tabsUi.tabs('option', 'active', tabNum); } else { tabsUi.tabs('option', 'active', 0); } }); 

La mia strada per l’interfaccia utente di jQuery 1.10.3

 $("#tabs").tabs({ beforeActivate: function(event, ui) { var hash = ui.newTab.children("li a").attr("href"); window.location.hash = hash; } }); 

Questo ha funzionato per me usando Jquery 1.8

 $('#tabs').tabs({ activate: function(event, ui) { window.location.hash = ui.newPanel.attr('id'); } }); 

Dopo aver esaminato alcune altre domande e i documenti dell’API jQueryUI, ho scoperto che questo ha funzionato per me.

 $(document).ready(function() { $("#tabs").tabs({ activate: function( event, ui ) { location.hash = ui.newTab.children(".ui-tabs-anchor").attr("href").substr(1); } }); }); 

Sto usando un plugin per tabs che puoi trovare su github: https://github.com/jquerytools/jquerytools.github.com

Sembra che ui.tab stesso non restituisca una stringa valida. (invece ritorna indefinito, quindi diresti che non restituisce nulla).

Prova a guardarti intorno nella versione dev di ui.jquery.js se ci sono dei ritorni lì, forse devi chiamare un figlio di ui.tab 😉

Questo codice funziona bene per me:

 $('#tabs').tabs({ select: function(event, ui) { window.location = $(ui.tab).attr('href'); } }); 

Questo codice funziona per me:

 $("#tabs").tabs({ activate: function(event, ui) { window.location.hash=ui.newPanel.selector; } }); 

Il codice seguente è funzionante per me ..

 $("#tabs").tabs({ activate : function(event, ui) { window.location.hash = ui.newPanel[0].id; } }); 

Questo pezzo di codice ha funzionato per me:

 window.location.hash="";