zmiana location.hash z jquery ui tabulatory

Question

Próbuję znaleźć sposób zmienić window.location.hash na aktualnie wybranej karcie w Jquery UI Tabs.

Próbowałem:

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

Powoduje to zmianę skrótu do #undefined gdy karta zostanie zmieniony.

Próbowałem również:

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

Ale to nie wydaje się być wyzwalane w ogóle.

Każda pomoc zostanie doceniona. Dzięki.

Edycja: Wygląda na to, że część mojego początkowego problemu miała coś wspólnego z js, gdzie indziej przeszkadzało to. Zarówno przyjęta odpowiedź, jak i druga sugerowana odpowiedź nieznacznie zmodyfikowana, działają. Dziękuje wszystkim.

Answer 1

W funkcji obsługi zdarzenia ui.tab jest elementem zakotwiczającym. Możesz odzyskać wartość mieszania w następujący sposób:

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

Czy to działa dla Ciebie?

Answer 2

Czy to właśnie zamierzasz?

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

Wygląda na to, że sam ui.tab nie zwraca poprawnego ciągu. (zamiast tego zwraca undefined, więc możesz powiedzieć, że nic nie zwraca.)

Spróbuj rozejrzeć się w wersji dla ui.jquery.js, czy są tam jakieś zwroty, może musisz zadzwonić dzieckiem ui.tab ;-)

Answer 5

używam kartę plugin można go znaleźć na github: https://github.com/jquerytools/jquerytools.github.com

Answer 6

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

Answer 7

Chociaż niektóre z powyższych rozwiązań nie działa, powodują strona skakać w niektórych przypadkach, ponieważ interfejs API window.location.hash ma na celu przeniesienie do określonej części strony.

Ten gustowny rozwiązaniem proponowanym here, rozwiązuje ten problem

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

Answer 8

ten pracował dla mnie, jQuery UI 1.10:

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

Zobacz także: http://api.jqueryui.com/tabs/#event-activate

Answer 9

wiele z powyższych odpowiedzi don działa z aktualną wersją kart jQuery UI. Oto co obecnie używam:

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

Moja droga do 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

ten pracował dla mnie jQuery 1.8

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

Answer 12

Ten kod działa dla mnie ok:

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

Answer 13

moje proste rozwiązanie bez skoków:

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

Answer 14

Ten fragment kodu pracował dla mnie:

window.location.hash=""; 

Answer 15

Po przejrzeniu kilku innych pytań oraz dokumentację interfejsu API jQueryUI, którą odkryłem, że to się udało.

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

Answer 16

Ten kod działa dla mnie:

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

Answer 17

Poniższy kod pracował dla mnie ..

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