Jquery UI tabs, Linking between tabs externally only goes to tab one regardless of which tab anchor is in the url

StackOverflow https://stackoverflow.com/questions/19974257

  •  30-07-2022
  •  | 
  •  

Вопрос

I am trying to link to specific tabs externally. With the script I am using no matter which tab anchor is in the url it always goes to tab 1 when I use Google Analytics tagging in the url it only goes to tab one even though my script tells it to ignore everything after the parameter. I am linking to tabs using the following url - http://www.mysite.com/myshorturl#tabs-6?utm_source=campaign_detail&utm_medium=email&utm_campaign=my_campaign

I need it to ignore the parameter and everything after it and link to the correct tab. The scripts work as expected when not using GA tagging:

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);
    });
Это было полезно?

Решение

The issue is because the URL fragment, the # value, should come at the end of the URL, after the querystring:

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top