cambiar location.hash con jquery ui tabs

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 se traduce en el cambio de hash para #undefined cuando se cambia la pestaña.

También he intentado:

$("#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 que js en algún otro lugar interfiriera con esto. Tanto la respuesta aceptada como la otra respuesta sugerida ligeramente modificada funcionan. Gracias a todos.

Answer 1

En su función de controlador de eventos ui.tab es un elemento de anclaje. Puede recuperar su valor hash de la siguiente manera:

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

¿Esto funciona para usted?

Answer 2

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

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

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 devoluciones allí, tal vez tenga que llamar un niño de ui.tab ;-)

Answer 5

estoy usando un plugin de pestaña que se puede encontrar en gitHub: https://github.com/jquerytools/jquerytools.github.com

Answer 6

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

Answer 7

Mientras que algunas de las soluciones anteriores funciona, que hacen que la página se desplace 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 solución ordenada propuso here, resuelve ese problema

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

Answer 8

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 9

Muchas de las respuestas anteriores don No funciona 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 10

Mi manera de 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

Esto funcionó para mí usando jQuery 1.8

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

Answer 12

Este código funciona bien para mí:

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

Answer 13

mi solución sencilla y sin saltos:

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

Answer 14

Este trozo de código que funcionó para mí:

window.location.hash=""; 

Answer 15

Después de mirar a través de algunas otras preguntas y los documentos API jQueryUI encontré 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 16

Este código funciona para mí:

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

Answer 17

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

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