Onglets de l'interface utilisateur jQuery, mettez à jour l'URL lorsque vous cliquez sur un onglet différent

Je suis en utilisant les onglets de l'INTERFACE utilisateur de jQuery: http://jqueryui.com/demos/tabs/

Comment mettre à jour l'url de la navigateur lorsque l'utilisateur clique sur un onglet différent en ajoutant à l'ancre du lien:
ex: url.html#tab-4 et en poussant l'histoire actuelle du navigateur dans le même temps.

Merci!

source d'informationauteur Jerome Ansia

  1. 11

    Cela devrait obtenir ce que vous voulez (à l'aide de l'INTERFACE utilisateur de jQuery 1.8dans la version 1.9 et l'utilisation ultérieure de l' activer l'événementvoir les autres réponses pour l'exemple de code). J'ai utilisé l'exemple de code HTML dans jQuery UI démos;

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

    Pour jQuery UI 1.10 et plus tard show a été dépréciée en faveur de activate. Aussi id n'est plus valide jQuery. Utilisation .attr('id') à la place. Enfin, l'utilisation on('tabsactivate') au lieu de bind().

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

    Post-méthode de création:

    $("#myTabs").on( "tabsactivate", function(event, ui) {
    window.location.hash = ui.panel.id;
});

    Démo: http://jsfiddle.net/RVHzV/

    Observables résultat: http://jsfiddle.net/RVHzV/show/light/

    Plus tôt, la Version de JQuery

    Ajouter un gestionnaire pour votre onglet appel à la mise à jour de l'emplacement de hachage avec l'onglet id:

    $("#myTabs").tabs({
   //options ...
   show: function(event, ui) {
        window.location.hash = ui.panel.id;
   }
});

    Vous pouvez également ajouter cette après votre INTERFACE utilisateur Onglets sont créés:

    $("#myTabs").bind( "tabsshow", function(event, ui) {
        window.location.hash = ui.panel.id;
});

    Code de démo: http://jsfiddle.net/jtbowden/ZsUBz/1/

    Observables résultat: http://fiddle.jshell.net/jtbowden/ZsUBz/1/show/light/

  3. 2

    Tout d'abord, nous avons besoin de mettre à jour la table de hachage sur l'onglet modifier (c'est pour plus tard jQueryUI):

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

    Alors nous avons besoin de mettre à jour l'onglet actif sur le hachage de changement (c'est à dire l'activation de l'historique de navigation, les boutons suivant/précédent et de l'utilisateur de taper dans la table de hachage manuellement):

    $(window).on('hashchange', function () {
  if (!location.hash) {
    $('#tabs').tabs('option', 'active', 0);
    return;
  }
  $('#tabs > ul > li > a').each(function (index, a) {
    if ($(a).attr('href') == location.hash) {
      $('#tabs').tabs('option', 'active', index);
    }
  });
});
  4. 1

    J'ai dû utiliser "créer" au lieu de "activer" pour obtenir mon premier onglet à afficher dans l'URL:

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

    Cette solution semble être de travailler pour le changement de l'URL, mais quand je reviens à l'URL il n'a pas changer d'onglet pour moi. Dois-je faire quelque chose de spécial pour le faire changer d'onglet lorsque l'URL est atteint?

  5. 1
    $( "#tabs" ).tabs({            
        activate: function(event, ui) {
            //Key => random string
            //url => URL you want to set
            window.history.pushState({key:'url'},'','url');
        }
    });
  6. 0

    Construction de Jeff B de l'ouvrage ci-dessus...cela fonctionne avec jQuery 1.11.1.

    $("#tabs").tabs(); //initialize tabs
$(function() {
    $("#tabs").tabs({
        activate: function(event, ui) {
            var scrollTop = $(window).scrollTop(); //save current scroll position
            window.location.hash = ui.newPanel.attr('id'); //add hash to url
            $(window).scrollTop(scrollTop); //keep scroll at current position
    }
});
});
  7. 0

    Une combinaison d'autres réponses ici a fonctionné pour moi.

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

    J'ai utilisé cette méthode dans mon jQuery responsive onglets de hash de l'url de l'onglet actif.

    $(function() {
       $('#tabs, #subtabs').responsiveTabs({
            activate: function(event, ui) {
            window.location.hash = $("ul li.r-tabs-state-active a").attr("href");
        },
        startCollapsed: 'accordion'
       });
});