基于URL Slug为横向手风琴元素添加/移除active类的技术求助

核心思路 #

监听页面加载与URL哈希变化事件，根据当前URL中的锚点值（#recover/#active/#mother/#kids），自动匹配对应的.tabs_link和.tabs_content元素，通过添加/移除active类切换手风琴展开状态。

实现代码 #

// 建立锚点与目标元素选择器的映射，便于后续维护
const anchorToElementsMap = {
  '#recover': {
    link: '.tabs_link.recover',
    content: '.tabs_content.recover'
  },
  '#active': {
    link: '.tabs_link.active-tab', // 避免与active类冲突，使用自定义组合类
    content: '.tabs_content.active-tab'
  },
  '#mother': {
    link: '.tabs_link.mother',
    content: '.tabs_content.mother'
  },
  '#kids': {
    link: '.tabs_link.kids',
    content: '.tabs_content.kids'
  }
};

// 处理激活状态的核心函数
function setActiveTabByAnchor() {
  const currentHash = window.location.hash;
  
  // 移除所有元素的active类
  document.querySelectorAll('.tabs_link.active, .tabs_content.active').forEach(el => {
    el.classList.remove('active');
  });
  
  // 匹配到锚点时，给对应元素添加active类
  if (anchorToElementsMap[currentHash]) {
    const { link, content } = anchorToElementsMap[currentHash];
    document.querySelector(link)?.classList.add('active');
    document.querySelector(content)?.classList.add('active');
  } else {
    // 无匹配锚点时，恢复默认激活项（可根据实际情况调整选择器）
    document.querySelector('.tabs_link.active-default, .tabs_content.active-default')?.classList.add('active');
  }
}

// 页面加载时初始化状态
window.addEventListener('load', setActiveTabByAnchor);
// URL哈希变化时更新状态
window.addEventListener('hashchange', setActiveTabByAnchor);

使用说明 #

1. 确保.tabs_link和.tabs_content元素带有对应组合类（如.tabs_link.recover），与映射表中的选择器一致
2. 若默认激活项未预加active类，可给它添加active-default类，或直接修改else分支的选择器指向你的默认项
3. 将代码放入Webflow的自定义代码区域（页面级/项目级均可）

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