jQuery 使用外部选项卡 URL

Question

我使用下面的代码实现简单的 jquery 标签效果。效果很好，但是，我希望能够像这样使用 link：

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

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

$(".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 参数添加到您的 link 到带有选项卡的页面。例如http://yourpage.com/?active_tab=1

从那里您需要在准备好的文档中搜索 active_tab url 参数，然后在 jquery.[=12= 中添加适当的 class ]

像这样应该可以解决问题！[=12=]

$(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');
    }
});

jQuery 使用外部选项卡 URL

jQuery Tabs using External URL

css

jquery

tabs