активация jquery tabber на основе ссылки URL

Question

Я довольно новичок в jquery, и я решил создать jQuery tabber. Пока все хорошо, но у меня есть небольшая проблема !!! Я не могу увидеть, как я могу активировать tabber на основе URL. Например, когда ссылка - www.myweb.com # tab2, активируется вторая вкладка. Мой jquery выглядит следующим образом.

$(document).ready(function() { 

    // When page loads... 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab content 

    // On Click Event 
    $("ul.tabs li").click(function() { 
     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab_content").hide(); //Hide all tab content 

     var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active ID content 
     return false; 
    }); 

}); 

и HTML список следующим образом

<ul class="tabs"> 
    <li><a href="#tab1">Design Team</a></li> 
    <li><a href="#tab2">Publications</a></li> 
    <li><a href="#tab3">Awards &amp; Recognitions</a></li> 
    <li><a href="#tab4">Our Mission</a></li> 
    <li class="last-item"><a href="#tab1">Company Profile</a></li> 
</ul> 

теперь, когда кто-то посетите мой сайт по этой ссылке www.mywebsite.com#tab3, я хочу tab3 быть активирован. Я знаю, что jquery tabber имеет это, но я не знаю, как добиться этого с помощью своего собственного jQuery tabber. Любая помощь будет принята с благодарностью

Answer 1

Активировать элемент с href атрибута равным location.hash:

$(document).ready(function() { 
    var hash = location.hash; 
    $(".tab_content").hide(); //Hide all content 
    if ($("ul.tabs li a[href='" + hash + "']").length) { //check if such link exists 
     $("ul.tabs li a[href='" + hash + "']").parent().addClass("active"); //Activate tab 
     $(hash).show(); 
    } 
    else { 
     $("ul.tabs li:first").addClass('active'); 
     $(".tab_content:first").show() 
    }  
} 

Answer 2

Довольно просто. Вы можете указать triggerclick событие, основанное на вашем индексе хеширования.

Это будет работать на вас. Если вы обновите страницу после нажатия кнопки tab3, и ваш url содержит хеш-индекс #tab3, ваша третья вкладка будет сфокусирована автоматически.

Я предполагаю, что у вас есть идентификатор tab1, tab2, tab3, tab4 в вашем li или a тег и его альт.
Добавьте эти коды в существующий код, не затрагивая их, и все готово.

$(function(){ 
    if(location.href.indexOf('#') != -1){ 
     var namedAnchor = window.location.hash; 
     var findToTab = namedAnchor; 
     $(findToTab).trigger('click'); 
    } 
}); 

Edit:
Как всегда, если вы не хотите назначать любые идентификаторы либо li или a тега, вы можете сделать это.

$(function(){ 
    if(location.href.indexOf('#') != -1){ 
     var namedAnchor = window.location.hash; 
     var findToTab = namedAnchor; 
     $("ul.tabs li a[href='" + findToTab + "']").trigger('click'); 
    } 
});