changement d'emplacement.hachage avec les onglets de l'interface utilisateur jquery

Question

changement d'emplacement.hachage avec les onglets de l'interface utilisateur jquery

J'ai essayé de trouver un moyen de changer la fenêtre.emplacement.hachez 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 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 être déclenché du tout.

Toute aide serait appréciée. Grâce.

Edit: il semble qu'une partie de mon problème initial ait quelque chose à voir avec js ailleurs interférer avec cette. La réponse acceptée et l'autre Réponse suggérée légèrement modifiée fonctionnent. Merci à tous.

47

fragment-identifier jquery jquery-ui tabs

demandé sur Josh Lee 2009-02-20 19:35:06

17 réponses

score 49 · Answer 1

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 cela fonctionne pour vous?

score 25 · Answer 2

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

score 14 · Answer 3

Alors que certaines des solutions ci-dessus fonctionnent, elles font sauter la page dans certains cas, comme la fenêtre.emplacement.L'API de hachage 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);
  });

score 8 · 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

score 6 · Answer 5

Ma solution simple sans sauter:

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

score 4 · Answer 6

Serait - ce ce que vous allez faire?

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

score 3 · Answer 7

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

score 3 · Answer 8

Beaucoup des réponses ci-dessus ne fonctionnent pas avec la version actuelle des onglets de L'interface utilisateur jQuery. 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);
    }
});

score 3 · Answer 9

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

score 1 · Answer 10

Cela a fonctionné pour moi en utilisant jquery 1.8

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

score 1 · Answer 11

Après avoir regardé à travers d'autres questions et les documents 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);
        }
    });
});

score 1 · Answer 12

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

score 0 · Answer 13

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

Essayez de regarder dans la version dev de l'interface utilisateur.jquery.js s'il y a des retours là-bas, peut-être que vous devez appeler un enfant de l'interface utilisateur.onglet ;-)

score 0 · Answer 14

Ce code fonctionne bien pour moi:

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

score 0 · Answer 15

Ce code fonctionne pour moi :

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

score 0 · Answer 16

Le code suivant est travaillé pour moi..

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

score -1 · Answer 17

Ce morceau de code a fonctionné pour moi:

window.location.hash="";

-1

répondu user1547535 2014-07-11 12:11:24

Las etiquetas más populares

changement d'emplacement.hachage avec les onglets de l'interface utilisateur jquery

17 réponses