web-dev-qa-db-fra.com

changer location.hash avec les onglets jquery ui

J'ai essayé de trouver un moyen de changer le window.location.hash en 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 entraîne la modification du hachage en #undefined lorsque l'onglet est modifié.

J'ai aussi essayé:

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

Mais cela ne semble pas du tout déclenché.

Toute aide serait appréciée. Merci.

Edit: Il semble qu'une partie de mon problème initial avait quelque chose à voir avec le fait que js ailleurs interfère avec cela. La réponse acceptée et l'autre réponse suggérée légèrement modifiée fonctionnent. Merci a tous.

jqueryjquery-uitabsfragment-identifier
47
Rob

Dans votre fonction de gestionnaire d'événements 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;
})

Est-ce que ça marche pour toi?

49
Serxipc
$('#tabs').tabs({
    select: function(event, ui) {
        window.location.hash = ui.tab.hash;
    }
});
25
Herman van der Meulen

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

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

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

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

8
romaninsh

ma solution simple sans sauter:

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

Serait-ce ce que vous recherchez?

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

La plupart des réponses ci-dessus ne fonctionnent pas avec la version actuelle des onglets jQuery UI. Voici ce que j'utilise actuellement:

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);
    }
});
3
Thomas Higginbotham

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

J'utilise un plugin d'onglet que vous pouvez trouver sur github: https://github.com/jquerytools/jquerytools.github.com

1
FDisk

Après avoir examiné d'autres questions et les documents de l'API jQueryUI, j'ai constaté que cela fonctionnait pour moi.

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

Cela a fonctionné pour moi en utilisant Jquery 1.8

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

Le code suivant est travaillé pour moi ..

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

Ce code fonctionne bien pour moi:

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

Il semble que ui.tab lui-même ne retourne pas de chaîne valide. (au lieu de cela, il renvoie undefined, vous diriez donc qu'il ne renvoie rien du tout.)

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

0
Fabdrol

Ce code fonctionne pour moi:

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