Question

如果这样设置我的标签页，是否有任何方法可以基于URL激活特定标签页？

我需要的是在www.example1.com/notabs.html上的链接重定向到www.example2.com/tabs.html

www.example1.com/notabs.html上的特定链接应激活

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

www.example2.com/tabs.html上的Tab2

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

请在下面查看这些脚本的

//##########################################
// 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

您可以使用queryString参数来重定向传递的基本参数。会是这样的：

HTML

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

为了使事情变得简单，我建议将ID添加到标签容器

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

然后在此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");
    }
}

根据URL激活特定的选项卡

1 个答案: