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> 

它不会加载第三个标签。仍然默认加载第一个。

我在网上查了一下，好像没找到。使用上面链接中的代码可以做到这一点，还是我需要寻找其他东西？我的 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();