Question

通过单击添加到与所选选项卡对应的location.hash参数的选项卡，可以使用ui选项卡。如果选项卡中有嵌套，则会自动生成2个参数（以逗号分隔）。

Switch工作正常，但如果按下浏览器后退按钮，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

代码使用以下库：

jQuery 2.0
jQuery UI 1.10.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);
    }
}
});
});

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

1 个答案: