jQuery UI 选项卡 location.hash 浏览器后退按钮

Question

有ui选项卡，通过点击选项卡添加到location.hash参数中选择对应的选项卡。如果选项卡中有嵌套，则自动生成 2 个参数（逗号分隔）。

切换工作正常，但如果按下浏览器后退按钮，location.hash 会正确更改，但不会发生切换。

$(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>

谁知道如何解决？

Answer 1

代码使用以下库：

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