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

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

Чтобы использовать строку запроса из 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});
})

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

Используйте и возьмите location.hash не будет содержать # id1, поэтому просто активируйте этот идентификатор

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..
}