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 并且页面刷新我 go 回到 #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();