Michael Svanström

developer, photographer

jQuery UI Tabs with history

Unfortunately jQuery UI Tabs doesn’t support the back and forward buttons by default. Using jQuery address plugin and the following snippet will enable history support. All tab containers must have a unique id attribute!

The hash will be #tab_container_id=selected_tab_id

$('.your-tabs-selector').each(function(i,item) { var $me = $(item); $me.tabs({ select: function(event, ui) { window.location.hash = $me.attr('id') +'='+ui.tab.rel; } }); }); $.address.change(function(event){ var m = window.location.hash.match(/([w-]+)=([w-]+)/); if (m != null && m.length == 3) { $('#'+m[1]).tabs('select', m[2]); } });