jQuery选项卡使用外部URL

时间:2016-03-04 14:21:05

标签: jquery css tabs

我使用以下代码进行简单的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();
});

1 个答案:

答案 0 :(得分: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');
    }
});