Shopify跨页跳转指定标签页及刷新保持标签状态问题排查

嘿，我来帮你搞定这两个头疼的标签页问题！这俩问题本质都是页面加载时没读取URL里的锚点（hash）来激活对应标签，咱们调整一下JS代码就能完美解决。

首先先提个小细节：你的HTML代码里<div id="tab-1"> content etc.没闭合，记得补上</div>，不然可能会导致布局错乱哦～

修改后的完整代码 #

HTML部分（修正闭合问题后）

<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> 
  <div id="tab-2">content etc.</div> 
  <div id="tab-3"></div> 
</div>

JavaScript部分（核心修改）

$(document).ready(function() {
  $('ul.tabs').each(function(){
    const $tabsContainer = $(this);
    const $tabLinks = $tabsContainer.find('a');
    let activeLink, activeContent;

    // 第一步：优先读取URL中的锚点，判断是否有对应标签
    const targetHash = window.location.hash;
    if (targetHash && $tabLinks.filter(`[href="${targetHash}"]`).length) {
      // 如果锚点存在且对应标签存在，就激活它
      activeLink = $tabLinks.filter(`[href="${targetHash}"]`);
    } else {
      // 没有有效锚点时，默认激活第一个标签
      activeLink = $tabLinks.first();
    }

    // 初始化标签状态：激活对应标签，显示对应内容，隐藏其他内容
    activeLink.addClass('active');
    activeContent = $(activeLink.attr('href'));
    $tabLinks.not(activeLink).each(function() {
      $($(this).attr('href')).hide();
    });

    // 点击标签的切换逻辑，同时更新URL锚点
    $tabLinks.click(function(e){
      e.preventDefault(); // 阻止默认锚点跳转行为
      
      // 重置之前的激活状态
      activeLink.removeClass('active');
      activeContent.hide();
      
      // 设置新的激活状态
      activeLink = $(this);
      activeContent = $(activeLink.attr('href'));
      activeLink.addClass('active');
      activeContent.show();
      
      // 更新URL锚点，这样刷新页面时能记住当前标签
      window.location.hash = activeLink.attr('href');
    });
  });
});

关键修改点说明 #

• 初始化时读取锚点：页面加载时先检查URL里的hash，如果有对应的标签链接，就直接激活该标签，解决了带锚点跳转和刷新页面的问题
• 点击时更新锚点：每次切换标签时，把当前标签的锚点写入URL，这样刷新页面时浏览器会保留这个锚点，代码就能再次识别并激活对应标签
• 优化变量作用域：把相关变量整理得更清晰，避免原代码里可能出现的变量冲突问题

现在你可以测试一下：用带锚点的链接跳转（比如../pages/customPage#tab-3），或者在某个标签页刷新页面，应该都能停留在指定的标签页啦！

内容的提问来源于stack exchange，提问作者id_within