Jquery UI选项卡,外部选项卡之间的链接仅转到选项卡一,而不管URL中的哪个选项卡锚

时间:2013-11-14 09:44:16

标签: jquery jquery-ui-tabs

我正在尝试从外部链接到特定标签。使用我正在使用的脚本,无论哪个标签锚在网址中,当我在网址中使用Google Analytics标记时,它总是转到标签1,即使我的脚本告诉它忽略参数后的所有内容,它也会转到标签1。我使用以下网址链接到标签 - http://www.mysite.com/myshorturl#tabs-6?utm_source=campaign_detail&utm_medium=email&utm_campaign=my_campaign

我需要它忽略参数及其后的所有内容并链接到正确的选项卡。不使用GA标记时,脚本按预期工作:

HTML:

<div id="tabs">
    <ul id="tab-ul">
        <li class="class1"><a class="scroll" id="tab-1" href="#tabs-1"></a></li>
        <li class="class2"><a class="scroll" id="tab-2" href="#tabs-2"></a></li>
        <li class="class3"><a class="scroll" id="tab-3" href="#tabs-3"></a></li>
        <li class="class4"><a class="scroll" id="tab-4" href="#tabs-4"></a></li>
        <li class="class5"><a class="scroll" id="tab-5" href="#tabs-5"></a></li>
        <li class="class6"><a class="scroll" id="tab-6" href="#tabs-6"></a></li>
    </ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
<div id="tabs-4"></div>
<div id="tabs-5"></div>
<div id="tabs-6"></div>

JQUERY:

$(function () {
    // run the jquery ui plugin
    $('#tabs').tabs();

    $("#tabs").tabs({
        select: function(event, ui) {                   
            window.location.hash = ui.tab.hash;
        }
    });
});

$(window).bind("load", function () {
    var CleanURL = window.location.href.split("?")[1];
    var urlHash = CleanURL.split("#")[1];
    $('html,body').animate({ 
        scrollTop: $('a[href="#' + urlHash + '"]').offset().top -40}, 300);
    });

1 个答案:

答案 0 :(得分:1)

问题是因为URL片段#值应该出现在URL的末尾,在查询字符串之后:

  

http://www.mysite.com/myshorturl?utm_source=campaign_detail&utm_medium=email&utm_campaign=my_campaign#tabs-6