Связывание с конкретной вкладки с другой страницы

Question

У меня есть форма с 3-мя вкладками

<div class="tabs"> 
    <ul class="tabset"> 
    <li><a class="active"><span>Shirts</span></a></li> 
    <li><a href="#"><span>Jeans</span></a></li> 
     <li><a href="#"><span>Shoes</span></a></li> 
    </ul> 

    <div id="1"> 
    <p> Shirts </p> 
    </div> 
    <div id="2"> 
    <p> Jeans</p> 
    </div> 

    <div id="3"> 
    <p> Shoes</p> 
    </div> 
</div> 

Я хотел бы, чтобы иметь возможность ссылаться на определенную вкладку со страницы результатов и сделать ее активной вкладки. Я знаю, что я должен использовать строку запроса в URL-адресе из ссылки привязки страницы результатов.

Так что, если у меня есть 3 категории страниц результатов и каждый из них имеет обратную ссылку на форму, как:

<a href="./redefine?tab=id1"></a> 
<a href="./redefine?tab=id2"></a> 
    <a href=".redefine?tab=id3"></a> 

Какой код нужно использовать в странице формы, чтобы убедиться, что это работает. Я прочитал, что я должен убедиться, что с jquery проверяется, существует ли параметр и использует location.hash, но не уверен, как это сделать.

Answer 1

Использование и захватить location.hash не будет содержать # id1, так что просто TRIGG что ID

var hash = location.hash; // Get the hashtag 
if(hash!=""){ // See if it contain something 
    jQuery(hash.replace("#","")).trigger("click") // Remove # char from it and put the result as the selector.. 
} 

Answer 2

Там нет исходящих ссылка на фрагмент кода. Если вы пытаетесь отобразить новый контент на странице, не делая другого HTTP-запроса, вы не зависите от URL-адреса. Просто сохраните свой статус в некоторых переменных.

Answer 3

location.hash не представляет собой строку запроса, но ссылка привязки (с включенным #).

Это означает, что если у вас есть страница ./redefine якорь может быть ./redefine#1

строку запроса ?1 запустит браузер, чтобы действительно перейти на страницу, где #1 будет просто сделать прыжок страницы для id="1".

Пример: Чтобы сделать JQuery показать только показать нужную страницу, вы можете сделать:

HTML

<div class="tabs"> 
    <ul class="tabset"> 
    <li><a class="active" href="#1"><span>Shirts</span></a></li> 
    <li><a href="#2"><span>Jeans</span></a></li> 
     <li><a href="#3"><span>Shoes</span></a></li> 
    </ul> 

    <div class="tab" id="1"> 
    <p> Shirts </p> 
    </div> 
    <div class="tab" id="2"> 
    <p> Jeans</p> 
    </div> 

    <div class="tab" id="3"> 
    <p> Shoes</p> 
    </div> 
</div> 

Javascript

$('.tab').hide(); 
$(window).bind('hashchange', function() { 
    $('.tabset a').removeClass('active'); 
    $('.tab').hide(); 
    if (location.hash) 
    { 
     $('.tabset a[href="' + location.hash + '"]').addClass('active'); 
     $(location.hash).show(); 
    } 
}); 

Answer 4

Чтобы использовать строку запроса из url с вкладками jQueryUI:

$(function(){ 
    /* get search string from url */ 
    var query = location.search; 

    var reg = /\?tab=id/; 

    /* if search query use that value, if not use zero*/ 
    var tab= (query && query!='#') ? query.replace(reg,'') -1 : 0; 

    $('#tabs').tabs({ selected: tab}); 
}) 

Чтобы использовать хэш из URL с закладками jQueryUI:

$(function(){ 
    /* get search string from url */ 
    var query = location.hash; 

    var reg = /\#/; 

    /* if search query use that value, if not use zero*/ 
    var tab= (query && reg.test(query)) ? query.replace(reg,'') -1 : 0; 

    $('#tabs').tabs({ selected: tab}); 
})