Shopify загрузить конкретную вкладку по внешней ссылке на другой странице

Question

Здравствуйте, я использую эти вкладки shopify на странице, а не описание продукта, чтобы получить свой дизайн.

Вот ссылка, с которой я получил вкладки - https://help.shopify.com/en/themes/customization/products/features/add-tabs-to-product-descriptions

<div>
<ul class="tabs">
<li><a href="#tab-1">Info</a></li>
<li><a href="#tab-2">Shipping</a></li>
<li><a href="#tab-3">Returns</a></li>
</ul>
<div id="tab-1">
content etc.
<div id="tab-2">
content etc.
</div>
<div id="tab-3">
</div>
</div>


$(document).ready(function() {
$('ul.tabs').each(function(){
  var active, content, links = $(this).find('a');
  active = links.first().addClass('active');
  content = $(active.attr('href'));
  links.not(':first').each(function () {
    $($(this).attr('href')).hide();
  });
  $(this).find('a').click(function(e){
    active.removeClass('active');
    content.hide();
    active = $(this);
    content = $($(this).attr('href'));
    active.addClass('active');
    content.show();
    return false;
  });
});
});

Из этого кода мне интересно, как я могу попасть на конкретную вкладку, которая не активна по ссылке на другой странице.

Если я создаю ссылку и получаю ее как:

<a href="../pages/customPage#tab-3">link To tab</a> 

3-я вкладка не загружается.По-прежнему загружает первый по умолчанию.

Я посмотрел онлайн и, похоже, никуда не попал.Возможно ли это с помощью этого кода в приведенной выше ссылке, или мне нужно искать что-то еще?Мой JavaScript ограничен, и я пытался редактировать его самостоятельно из различных онлайн-учебников, но нигде не могу найти.

У меня также возникают проблемы с сохранением активной вкладки, если страница обновляется.Если я нахожусь на # tab-3 и страница обновляется, я возвращаюсь к # tab-1

Это связано с этой частью кода?Я пытался изменить его, используя свои ограниченные знания, и никуда не попал:

var active, content, links = $(this).find('a');
  active = links.first().addClass('active');
  content = $(active.attr('href'));
  links.not(':first').each(function () {
    $($(this).attr('href')).hide();
  });

Вставил код из комментария:

        window.onload = function() {
$('ul.tabs).each(function(){
  var openedHash = new URL(window.location.href).hash;
links.first().removeClass('active');
content.hide();
active = $('a[href='+ openedHash + ']');
content = $($('a[href='+ openedHash + ']').attr('href'));
active.addClass('active');
content.show();
  });
  $(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
  });
    });

Спасибо

Answer 1

Для получения активной вкладки после перезагрузки сайта вы можете попробовать использовать new URL(window.location.href).hash

Может быть что-то вроде этого

var openedHash = new URL(window.location.href).hash;
links.first().removeClass('active');
content.hide();
active = $('a[href='+ openedHash + ']');
content = $($('a[href='+ openedHash + ']').attr('href'));
active.addClass('active');
content.show();