移动端产品页Deep Linking功能修复：同步桌面端产品定位逻辑

问题分析 #

现有代码仅针对桌面端水平Slick标签页处理URL哈希跳转，但移动端使用下拉菜单替代标签页后，哈希匹配、产品激活及URL同步的逻辑未覆盖到下拉组件，导致深度链接失效。

解决方案 #

扩展现有逻辑，同时支持桌面端标签页和移动端下拉菜单，实现哈希导航的一致性，具体实现步骤如下：

1. 核心哈希导航处理函数

添加通用函数，在页面加载和哈希变化时触发，根据设备类型选择对应交互方式：

// 处理产品哈希导航
function handleProductHashNavigation() {
  const hash = window.location.hash.slice(1); // 移除#符号
  if (!hash) return;

  // 根据视口宽度判断是否为移动端（请替换为你网站的响应式断点）
  const isMobile = window.innerWidth < 768;

  if (isMobile) {
    // 定位移动端下拉菜单（替换为你实际的下拉选择器）
    const mobileDropdown = document.getElementById('mobile-product-dropdown');
    if (!mobileDropdown) return;

    // 查找匹配哈希值的下拉选项
    const targetOption = mobileDropdown.querySelector(`option[value="${hash}"]`);
    if (targetOption) {
      // 设置下拉菜单选中目标选项
      mobileDropdown.value = hash;
      // 触发change事件，激活对应产品内容（与用户手动选择逻辑一致）
      mobileDropdown.dispatchEvent(new Event('change'));
    }
  } else {
    // 保留你现有的桌面端Slick标签页逻辑
    const targetTab = document.querySelector(`.slick-tab[data-tab="${hash}"]`);
    if (targetTab) {
      targetTab.click();
    }
  }
}

// 页面加载时执行
document.addEventListener('DOMContentLoaded', handleProductHashNavigation);
// 监听哈希变化（浏览器前进/后退时触发）
window.addEventListener('hashchange', handleProductHashNavigation);

2. 同步下拉菜单选择与URL哈希

确保用户手动选择下拉菜单时，URL哈希同步更新，保证双向一致性：

// 获取移动端下拉菜单元素
const mobileDropdown = document.getElementById('mobile-product-dropdown');
if (mobileDropdown) {
  mobileDropdown.addEventListener('change', function() {
    const selectedProductId = this.value;
    if (selectedProductId) {
      // 更新URL哈希
      window.location.hash = selectedProductId;
      // 可选：滚动到产品内容区域
      document.getElementById(selectedProductId)?.scrollIntoView({ behavior: 'smooth' });
    }
  });
}

3. 统一产品激活逻辑（可选优化）

将产品内容展示、激活状态更新的逻辑抽离为通用函数，避免重复代码：

// 通用产品激活函数
function activateProduct(productId) {
  // 隐藏所有产品内容
  document.querySelectorAll('.product-content').forEach(content => {
    content.classList.add('hidden');
  });
  // 显示目标产品内容
  const targetContent = document.getElementById(productId);
  if (targetContent) {
    targetContent.classList.remove('hidden');
  }

  // 更新桌面端标签页激活状态（如果需要）
  document.querySelectorAll('.slick-tab').forEach(tab => {
    tab.classList.remove('active');
  });
  const targetTab = document.querySelector(`.slick-tab[data-tab="${productId}"]`);
  if (targetTab) {
    targetTab.classList.add('active');
  }
}

修改下拉菜单的change事件和桌面标签页的click事件，调用该通用函数：

// 移动端下拉菜单事件
mobileDropdown.addEventListener('change', function() {
  const selectedProductId = this.value;
  if (selectedProductId) {
    window.location.hash = selectedProductId;
    activateProduct(selectedProductId);
    document.getElementById(selectedProductId)?.scrollIntoView({ behavior: 'smooth' });
  }
});

// 桌面端标签页事件（替换你现有的点击逻辑）
document.querySelectorAll('.slick-tab').forEach(tab => {
  tab.addEventListener('click', function() {
    const productId = this.dataset.tab;
    window.location.hash = productId;
    activateProduct(productId);
  });
});

关键注意事项 #

• 确保下拉菜单的option元素的value属性与哈希值完全匹配（如xxx-tea）。
• 根据你网站的响应式设计，调整移动端断点（示例中为768px）。
• 替换代码中的选择器（如#mobile-product-dropdown、.slick-tab、.product-content）为你实际页面中的元素选择器。
• 验证change事件触发后，产品内容展示、激活状态更新的逻辑与桌面端完全一致。

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