Shopify平台添加.active类后链接无法跳转问题求助

你的问题根源有两个：

1. e.preventDefault()阻止了链接跳转：原代码里调用这个方法会直接取消链接的默认跳转行为，点击后自然无法跳转到目标页面。
2. 重复使用ID违反HTML规范：循环生成的每个子分类容器都用了id="subcategories"，而HTML中ID必须唯一，这会导致jQuery选择器只能匹配第一个元素，后续的子分类链接无法正确绑定事件或被选中。

1. 将重复的ID改为class，确保所有子分类容器都能被正确选中；
2. 移除e.preventDefault()，恢复链接的默认跳转功能；
3. 页面加载时根据当前URL匹配对应链接添加active类，保证页面刷新后高亮状态依然存在（因为点击跳转后页面会刷新，点击时临时添加的active会消失，所以加载时匹配URL才是持久化高亮的正确方式）。

Liquid 模板部分（修正ID为class） #

{%- for block in section.blocks -%}
  {%- assign image = block.settings.image -%}{%- assign url = block.settings.url -%}
  <div class="subcategories cat_space_item {{ccol}} brand_item nt_{{block.id}} tc">
      <a href="{{ url }}" class="db" target="{{block.settings.open_link}}">
          <p>{{ block.settings.coll_title }}</p>
      </a>
  </div>
{%- endfor -%}

jQuery 脚本部分（移除阻止跳转，添加加载时匹配URL逻辑） #

$(document).ready(function() {
    // 获取当前页面的完整URL
    const currentPageUrl = window.location.href;

    // 页面加载时，给匹配当前URL的链接添加高亮类
    $('.subcategories a').each(function() {
        if ($(this).attr('href') === currentPageUrl) {
            $(this).addClass('active');
        }
    });

    // 点击链接时的即时高亮反馈（可选，跳转后会刷新，仅作视觉提示）
    $('.subcategories').on('click', 'a.db', function() {
        $('.subcategories a').removeClass('active');
        $(this).addClass('active');
        // 不阻止默认跳转，让链接正常打开目标页面
    });
});

CSS 样式部分（保持不变） #

.active { 
    font-weight: bold; 
    font-size: 20px; 
    background-color: yellow;
}

内容的提问来源于stack exchange，提问作者August Palanca Jr