changer d'emplacement.hash avec jquery ui tabs

Question

J'ai essayé de trouver un moyen de changer la fenêtre.emplacement.hachage de l'onglet actuellement sélectionné dans Jquery UI Tabs.

J'ai essayé:

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

Cela se traduit dans l'évolution de la valeur de hachage à #non défini lorsque l'onglet est modifiée.

J'ai aussi essayé:

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

Mais cela ne semble pas être déclenchée à tout.

Toute aide serait appréciée. Merci.

Edit: Il ressemble à une partie de mon problème initial avait quelque chose à faire avec js ailleurs interférer avec cette. Les deux accepté de répondre et de l'autre les réponses proposées légèrement modifiée faire le travail. Merci à tous.

Answer 1

Dans votre fonction de gestionnaire d'événement ui.tab est un point d'ancrage de l'élément. Vous pouvez récupérer sa valeur de hachage comme ceci:

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

Cela fonctionne pour vous?

Answer 2

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

Answer 3

Alors que certaines de ces solutions ne fonctionne, ils provoquent la page pour naviguer dans certains cas, comme la fenêtre.emplacement.hachage de l'API est conçue pour vous amener à une partie spécifique de la page.

Cette solution élégante proposée ici, résout ce problème

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

Answer 4

Cela a fonctionné pour moi, jQuery UI 1.10:

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

Voir aussi: http://api.jqueryui.com/tabs/#event-activate

Answer 5

ma solution simple sans saut:

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