jQuery UI Tabs back button history

CesarHerrera picture CesarHerrera · May 2, 2009 · Viewed 28.8k times · Source

Has anyone been able to get jQuery UI Tabs 3(Latest version) working with the back button?

I mean if the user hits the back button they should go to the previously visited tab on the page, not a different page.

The history plug in sounds like it can work, but i cant seem to make it work with ajax loaded tabs.

If anyone has managed to make this work, it would be deeply appreciated, thanks!

Answer

Justin Hamade picture Justin Hamade · Jul 25, 2010

I just ran into this as well. Its really easy with the jquery address plugin here http://www.asual.com/jquery/address/

The demo for tabs seemed a bit over complicated. I just did this:

$('document').ready(function() {
    // For forward and back
    $.address.change(function(event){
      $("#tabs").tabs( "select" , window.location.hash )
    })

    // when the tab is selected update the url with the hash
    $("#tabs").bind("tabsselect", function(event, ui) { 
      window.location.hash = ui.tab.hash;
    })
});