2016-03-04 3 views
0

Я использую приведенный ниже код для простого эффекта вкладок jquery. Он прекрасно работает, однако, я хотел бы иметь возможность использовать ссылку так:Вкладки jQuery с использованием внешнего URL

<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'); 
    } 
}); 
Смежные вопросы