cambiando location.hash con jquery ui tabs

jquery-ui fragment-identifier

Question

He estado tratando de encontrar una manera de cambiar la ventana.location.hash a la pestaña actualmente seleccionada en Jquery UI Tabs .

He intentado:

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

Esto da como resultado el cambio de hash a #undefinido cuando se cambia la pestaña.

También lo intenté:

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

Pero esto no parece ser activado en absoluto.

Cualquier ayuda sería apreciada. Gracias.

Editar: Parece que parte de mi problema inicial tenía algo que ver con js en otro lugar interfiriendo con esto. Tanto la respuesta aceptada como la otra respuesta sugerida ligeramente modificada funcionan. Gracias a todos.

Answer 1

¿Sería esto lo que estás buscando?

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

Answer 2

Después de revisar algunas otras preguntas y los documentos de la API de jQueryUI, descubrí que esto terminó funcionando para mí.

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

Answer 3

El siguiente código se trabajó para mí ..

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

Answer 4

En su evento, la función del manejador ui.tab es un elemento de anclaje. Puede recuperar su valor hash como este:

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

¿Esto funciona para tí?

Answer 5

Este código funciona bien para mí:

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

Answer 6

Este código funciona para mí:

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

Answer 7

Este pedazo de código funcionó para mí:

window.location.hash="";

Answer 8

Esto funcionó para mí usando Jquery 1.8

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

Answer 9

Esto funcionó para mí, jQuery UI 1.10:

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

Ver también: http://api.jqueryui.com/tabs/#event-activate

Answer 10

Estoy usando un complemento de tabulación que puedes encontrar en github: https://github.com/jquerytools/jquerytools.github.com

Answer 11

Mi camino para 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 12

Muchas de las respuestas anteriores no funcionan con la versión actual de jQuery UI Tabs. Esto es lo que estoy usando actualmente:

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 13

Parece que ui.tab en sí mismo no devuelve una cadena válida. (en cambio, devuelve indefinido, por lo que diría que no devuelve nada).

Intente buscar en la versión de desarrollo de ui.jquery.js si hay alguna devolución allí, tal vez tenga que llamar a un hijo de ui.tab ;-)

Answer 14

Si bien algunas de las soluciones anteriores funcionan, hacen que la página salte en algunos casos, ya que la API window.location.hash está diseñada para llevarlo a una parte específica de la página.

Esta pulcra solución propuesta here resuelve ese problema

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

Answer 15

mi solución simple sin saltar:

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

Answer 16

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

Answer 17

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