modifica location.hash con le schede ui jquery

Question

Ho cercato di trovare un modo per modificare il parametro window.location.hash nella scheda attualmente selezionata in Jquery UI Tabs.

ho provato:

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

Ciò si traduce nel cambiare l'hash per #undefined quando la scheda è cambiato.

Ho anche provato:

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

Ma questo non sembra essere attivato a tutti.

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.

Answer 1

Nella funzione di gestione evento ui.tab è un elemento di ancoraggio. Puoi recuperare il suo valore hash in questo modo:

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

Questo lavoro fa per te?

Answer 2

Questo sarebbe quello che stai andando?

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

Answer 3

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

Answer 4

Sembra che ui.tab non restituisca una stringa valida. (invece restituisce un valore non definito, quindi si direbbe che non restituisce nulla.)

Provare a cercare nella versione di dev di ui.jquery.js se ci sono ritorni lì, forse è necessario chiamare un bambino di ui.tab ;-)

Answer 5

sto usando una linguetta plugin è possibile trovare presso github: https://github.com/jquerytools/jquerytools.github.com

Answer 6

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

Answer 7

Mentre alcune delle soluzioni sopra funziona, che provocano la pagina per saltare in alcuni casi, l'API window.location.hash è progettata per portarti in una parte specifica della pagina.

Questa soluzione pulita proposto here, risolve questo problema

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

Answer 8

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

Answer 9

Molte delle risposte di cui sopra don funziona con la versione corrente delle schede dell'interfaccia utente jQuery. Ecco quello che sto attualmente in uso:

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

Answer 10

Il mio modo di jQuery UI 1.10.3

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

Answer 11

Questo ha funzionato per me utilizzando jQuery 1.8

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

Answer 12

Questo codice funziona bene per me:

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

Answer 13

mia soluzione semplice senza saltare:

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

Answer 14

Questo pezzo di codice ha funzionato per me:

window.location.hash=""; 

Answer 15

Dopo aver esaminato alcune altre domande e i documenti API di jQueryUI ho scoperto che questo ha finito per funzionare per me.

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

Answer 16

Questo codice funziona per me:

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

Answer 17

Il seguente codice è lavorato per me ..

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