Modification de location.hash avec les onglets jquery ui

Question

J'ai essayé de trouver un moyen de remplacer window.location.hash par 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; 
}) 

Il en résulte la modification du hachage #undefined 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. Editer: Il semble qu'une partie de mon problème initial a quelque chose à voir avec js ailleurs qui interfère avec cela. La réponse acceptée et l'autre réponse suggérée sont légèrement modifiées. Merci a tous.

Answer 1

Dans votre gestionnaire d'événements, la fonction ui.tab est un élément d'ancrage. 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

Serait-ce ce que vous allez faire?

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

Il semble que ui.tab ne renvoie pas de chaîne valide. (Au lieu de cela, il renvoie indéfini, donc vous diriez qu'il ne renvoie rien du tout.)

Essayez de regarder dans la version de développement de ui.jquery.js s'il y a des retours là-bas, peut-être que vous devez appeler un enfant de ui.tab ;-)

Answer 5

J'utilise un onglet plugin, vous pouvez le trouver à github: https://github.com/jquerytools/jquerytools.github.com

Answer 6

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

Answer 7

Bien que certaines des solutions ci-dessus fonctionnent, ils provoquent la page de sauter autour Dans certains cas, l'API window.location.hash est conçue pour vous amener à une partie spécifique de la page.

Cette solution soignée proposée here, permet de résoudre cette question

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

Answer 8

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 9

Beaucoup des réponses ci-dessus don ne fonctionne pas avec la version actuelle des onglets de l'interface utilisateur jQuery. Voici ce que je suis actuellement en utilisant:

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

Mon chemin pour 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

Cela a fonctionné pour moi en utilisant Jquery 1.8

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

Answer 12

Ce code fonctionne bien pour moi:

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

Answer 13

ma solution simple sans sauter:

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

Answer 14

Ce morceau de code a fonctionné pour moi:

window.location.hash=""; 

Answer 15

Après avoir regardé d'autres questions et les documents de l'API jQueryUI, j'ai trouvé que cela a fini par fonctionner pour moi.

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

Answer 16

Ce code fonctionne pour moi:

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

Answer 17

Le code suivant a fonctionné pour moi ..

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