使用外部 URL 的 jQuery 标签

Question

我正在使用下面的代码实现简单的 jquery 选项卡效果。它工作得很好，但是，我希望能够使用这样的链接:

<a href="" class="tab-link-1">Tab Link 1</a>

我希望能够在与带有标签的页面不同的页面上使用此链接。然后，理想情况下，一旦链接将用户带到新页面(带有选项卡)，页面将加载已打开的所选选项卡或当前类。有什么建议吗？

$(".tabs-menu a").hover(function(event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn();
});

Answer 1

在不同的页面上，将某种 URL 参数添加到带有标签的页面的链接中。例如http://yourpage.com/?active_tab=1

从那里您需要在准备好的文档上搜索 active_tab url 参数，然后在 jquery 中添加适当的类。

像这样应该可以解决问题!

$(document).ready(function() {
    var search = window.location.search; //gives search string of url i.e. ?param1=a&param2=b
    var searchAry = search.split('&'); //split up the search string based on & delimeter. if theres no other params you won't need to do this
    var tabActive;
    for (var i = 0; i < searchAry.length; i++) {
        var tmp = searchAry[i].substring(1); //remove '?' or '&' at beginning of each string
        if (tmp.indexOf('tab_active') > -1) { //if the current param is the tab_active param
            var tabActive = tmp.replace('tab_active=', ''); //parse out the number
        }
    }

    if (tabActive) {
        var elemClass = '.tab-link-' + tabActive;  
        $(tabActive).parent().addClass('current');
    }
});