根据 URL 激活特定选项卡答案

【问题标题】：Activate specific Tab based on URL根据 URL 激活特定选项卡
【发布时间】：2019-03-08 17:06:46
【问题描述】：

如果我的标签是这样设置的，有什么方法可以根据 URL 激活特定的标签？

我只需要www.example1.com/notabs.html 上的链接重定向到www.example2.com/tabs.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>

请查看下面这些的 Javascript

//##########################################
// 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;
});

【问题讨论】：

标签： javascript jquery html css

【解决方案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");
    }
}

【讨论】：