jQuery UI Tabs location.hash browser back button

Question

There are ui tabs, by clicking on the tab added to the location.hash parameters corresponding to the selected tab. If there is nesting in tabs then automatically generates 2 parameters (comma-delimited).

Switch works fine, but if the browser back button press, location.hash changes correctly, but the switch does not occur.

$(document).ready(function(){

$(".myclass").tabs({
    select: function(event, ui)
    {
        var parent_id;

        parent_id = $(ui.panel).parents(".myclass").parents('.ui-tabs-panel').attr('id');

        if(typeof parent_id !== 'undefined')
        {
            window.location.hash = '#t=' + parent_id + ',' + ui.tab.hash.substr(1);
        }
        else
        {
            window.location.hash = '#t=' + ui.tab.hash.substr(1);
        }
    }
});

$.address.change(function(event)
{
    var param = '';
    param = window.location.hash;

    if(param.indexOf('t=') > 0)
    {
        var regexp = /#t=(.+)/i;
        var hash = param.match(regexp);

        if(hash.length > 0)
        {
            hash = hash[1].split(/#t=\s*,\s*/);
        }

        if(hash.length > 0)
        {
            $(".myclass").tabs("select", hash[0]);
        }

        if(hash.length > 1)
        {
            $(".myclass").tabs("select", hash[1]);
        }
    }

});
})

-

<div class="myclass">
<ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 2</a></li>
</ul>
<div id="tab1">
    <p>Tab 1</p>
    <div id="subtabs1" class="myclass">
        <ul>
            <li><a href="#subtab11">SubTab 1</a></li>
            <li><a href="#subtab12">SubTab 2</a></li>
        </ul>
        <div id="subtab11">
            <p>SubTab 11</p>
        </div>
        <div id="subtab12">
            <p>SubTab 12</p>
        </div>
    </div>
</div>
<div id="tab2" >
    <p>Tab 2</p>
    <div id="subtabs2" class="myclass">
        <ul>
            <li><a href="#subtab21">SubTab 1</a></li>
            <li><a href="#subtab22">SubTab 2</a></li>
        </ul>
        <div id="subtab21">
            <p>SubTab 21</p>
        </div>
        <div id="subtab22">
            <p>SubTab 22</p>
        </div>
    </div>
</div>
<div id="tab3">
    <p>Tab 3</p>
    <div id="subtabs3" class="myclass">
        <ul>
            <li><a href="#subtab31">SubTab 31</a></li>
            <li><a href="#subtab32">SubTab 32</a></li>
        </ul>
        <div id="subtab31">
            <p>SubTab 31</p>
        </div>
        <div id="subtab32">
            <p>SubTab 32</p>
        </div>
    </div>
</div>

Who knows how to fix it?

Answer 1

The code use following libraries:

1. jQuery 2.0
2. jQuery UI 1.10.3

3. jQuery.address 1.6

   $(document).ready(function() {
      flag = true;
      $(".myclass").tabs({
   activate: function(event, ui)
   {
       if(!event.originalEvent)
           return;
       var parent_id;
       parent_id = $(ui.newPanel).parents(".myclass").parents('.ui-tabs-panel').attr('id');
   
       flag=false;
       if(typeof parent_id !== 'undefined')
       {
           window.location.hash = '#t=' + $(".myclass:eq(0)").tabs("option", "active") + ',' + ui.newTab.index();
       }
       else
       {
           window.location.hash = '#t=' + ui.newTab.index();
       }
   }
   });
   $.address.change(function(event)    {
   if(!flag)   {
       flag = true;
       return;
   }
   var param = '';
   param = window.location.hash;
   if(param.indexOf('t=') > 0)
   {
       var regexp = /#t=(.+)/i;
       var hash = param.match(regexp);
       if(hash.length > 0)
       {
           hash = hash[1].split(",");
           $(".myclass:eq(0)").tabs("option", "active", parseInt(hash[0]));
   
           if(hash.length > 1)
               $('.myclass:eq(0) .ui-tabs-panel:visible').find(".myclass").tabs("option", "active", parseInt(hash[1]));
           else
               $('.myclass:eq(0) .ui-tabs-panel:visible').find(".myclass").tabs("option", "active", 0);
       }
   }
   });
   });