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

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

Add a comment