Shopify 从另一个页面上的外部链接加载特定选项卡

Question

Hi there I am using these shopify tabs in a page, not product description, to get my design.

Here is the link I received the tabs from - 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;
  });
});
});

From this code I am wondering how I can get to a specific tab that is not active from a link on a different page.

If I create a link and have it as:

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

It doesn't load the 3rd tab. Still loads the first one as default.

I've had a look online and can't seem to get anywhere. Is this possible with this code in the above link or will I need to look for something else? My JavaScript is limited and tried to edit it myself from different tutorials online but can't get anywhere.

I am also having trouble keeping on that active tab if the page refreshes. If I am on #tab-3 and the page refresh I go back to #tab-1

Is it to do with this part of the code? I've tried changing it with my limited knowledge and don't get anywhere:

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();
  });

Pasted code from comment:

        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;
  });
    });

Thanks

Answer 1

For get active tab after site reload u can try use new URL(window.location.href).hash

May be some like this

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();