jQuery UI tabs, update url when clicking on a different tab

Question

I'm using the tabs of jQuery UI: http://jqueryui.com/demos/tabs/

How to update the current url of the browser when the user click on a different tab by adding the anchor link to it: ex: url.html#tab-4 and pushing the current history of the browser at the same time.

Thank you!

Answer 1

For jQuery UI 1.10 and later show has been deprecated in favor of activate. Also id is no longer valid jQuery. Use .attr('id') instead. Finally, use on('tabsactivate') instead of bind().

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

Post-creation method:

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

Demo: http://jsfiddle.net/RVHzV/

Observable result: http://jsfiddle.net/RVHzV/show/light/

Earlier Version of JQuery

Add a handler to your tab call to update the location hash with the tab id:

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

You can also add this after your UI Tabs are created:

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

Code demo: http://jsfiddle.net/jtbowden/ZsUBz/1/

Observable result: http://fiddle.jshell.net/jtbowden/ZsUBz/1/show/light/

Answer 2

This should get what you want (using jQuery UI 1.8, in version 1.9 and later use the activate event, see other answers for code example). I used the sample HTML in jQuery UI demos;

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