根据URL激活特定的选项卡

Question

Is there any way to activate a specific tab based on the URL if my tabs are setup like this?

All I need is for a link on www.example1.com/notabs.html to redirect to www.example2.com/tabs.html

That specific link on www.example1.com/notabs.html should activate

<li><a href="#" data-filter=".Tab2">Tab2</a></li>

Tab2 on www.example2.com/tabs.html

    <li><a href="#" data-filter=".Tab1" class="selected">Tab1</a></li>
    <li><a href="#" data-filter=".Tab2">Tab2</a></li>
    <li><a href="#" data-filter=".Tab3">Tab3</a></li>

Please view the Javascript for these below

//##########################################
// Filter - Isotope 
//##########################################


var $container = $('#filter-container');

$container.imagesLoaded( function(){
    $container.isotope({
        itemSelector : 'figure',
        filter: '*',
        resizable: false,
        animationEngine: 'jquery'
    });
});

// filter buttons

$('#filter-buttons a').click(function(){

    // select current
    var $optionSet = $(this).parents('#filter-buttons');
    $optionSet.find('.selected').removeClass('selected');
    $(this).addClass('selected');

    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    return false;
});

Answer 1

You can use queryString paramaters to redirect passing basic parameters. it would be something like this:

Html

<li><a href="www.example2.com/tabs.html?tab=tab2" data-filter=".Tab2">Tab2</a></li>

To make things easier, I would suggest adding ids to tab containers

<ul id="tabs">
    <li><a href="#" id="tab1" data-filter=".Tab1" class="selected">Tab1</a></li>
    <li><a href="#" id="tab2" data-filter=".Tab2">Tab2</a></li>
    <li><a href="#" id="tab3" data-filter=".Tab3">Tab3</a></li>
</ul>

Then in this tabs.html javascript:

$(document).ready(function(){
    var queryDict = {};
    var search = location.search.replace("==", "=").replace("==", "=").replace("==", "=");
    search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]});

    if (queryDict[tab]) {
        $('#tabs > .selected').removeClass("selected");
        $('#'+queryDict[tab]).addClass("selected");
    }
}