2016-03-04 89 views
0

我正在使用下面的代碼來實現簡單的jQuery選項卡效果。它的偉大工程,但是,我希望能夠使用一個鏈接,像這樣:使用外部URL的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

從不同的頁面,添加某種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'); 
    } 
}); 
相關問題