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

Answer 3

First, we need to update the hash on tab change (this is for latest jQueryUI):

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

Then we need to update the active tab on hash change (ie enabling browser history, back/forward buttons and user typing in the hash manually):

$(window).on('hashchange', function () {
  if (!location.hash) {
    $('#tabs').tabs('option', 'active', 0);
    return;
  }
  $('#tabs > ul > li > a').each(function (index, a) {
    if ($(a).attr('href') == location.hash) {
      $('#tabs').tabs('option', 'active', index);
    }
  });
});

Answer 4

$( "#tabs" ).tabs({            
        activate: function(event, ui) {
            //Key => random string
            //url => URL you want to set
            window.history.pushState({key:'url'},'','url');
        }
    });

Answer 5

I had to use "create" instead of "activate" to get my initial tab to show in the URL:

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

This solution seems to be working for changing the URL, but when I go back to the URL it doesn't switch tabs for me. Do I have to do something special to make it switch tabs when that URL is hit?

Answer 6

Building off of Jeff B's work above...this works with jQuery 1.11.1.

$("#tabs").tabs(); //initialize tabs
$(function() {
    $("#tabs").tabs({
        activate: function(event, ui) {
            var scrollTop = $(window).scrollTop(); // save current scroll position
            window.location.hash = ui.newPanel.attr('id'); // add hash to url
            $(window).scrollTop(scrollTop); // keep scroll at current position
    }
});
});

Answer 7

A combination of the other answers here worked for me.

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

Answer 8

I used this method within my jQuery responsive tabs to hash the url with the active tab.

$(function() {
       $('#tabs, #subtabs').responsiveTabs({
            activate: function(event, ui) {
            window.location.hash = $("ul li.r-tabs-state-active a").attr("href");
        },
        startCollapsed: 'accordion'
       });
});