无需jQuery：通过匹配href与id实现点击切换show类

嘿，我来帮你搞定这个问题！你已经完成了收集锚点和带id元素的第一步，接下来只需要把它们关联起来，给锚点绑定点击事件，就能实现根据href匹配id来切换show类的功能了。下面是完整的解决方案：

完整实现代码 #

function pageToggleMenu() {
  // 获取所有标记为"link"的锚点元素
  const anchors = document.getElementsByName('link');
  
  // 把所有带id的元素存入对象，用id作为键，方便快速查找
  const targetElements = {};
  document.querySelectorAll('[id]').forEach(element => {
    targetElements[element.id] = element;
  });

  // 为每个锚点添加点击事件处理
  anchors.forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      // 阻止锚点默认的跳转行为
      e.preventDefault();
      
      // 提取href中的目标id（去掉开头的#）
      const targetId = this.getAttribute('href').replace(/^#/, '');
      
      // 检查目标元素是否存在，不存在则直接返回
      const targetEl = targetElements[targetId];
      if (!targetEl) return;

      // 可选：如果需要"只显示当前元素，隐藏其他所有"，就执行这段代码
      Object.values(targetElements).forEach(el => {
        el.classList.remove('show');
      });

      // 切换目标元素的show类：toggle是点击一次添加、再点击移除；如果只想显示用add
      targetEl.classList.toggle('show');
    });
  });
}

// 确保DOM加载完成后再执行函数，避免找不到元素
document.addEventListener('DOMContentLoaded', pageToggleMenu);

关键步骤解释 #

• 用对象存储目标元素：相比数组，用id作为键的对象能让我们直接通过id快速找到对应元素，比遍历数组效率高很多。
• 阻止默认跳转：锚点默认会滚动到对应id的位置，我们要的是切换类，所以用e.preventDefault()阻止这个默认行为。
• 处理href值：锚点的href通常是#xxx格式，所以用replace(/^#/, '')去掉开头的#，得到纯净的id值。
• 切换类的逻辑：
  • 用classList.toggle('show')可以实现点击一次显示、再点击隐藏的切换效果；
  • 如果需求是点击某个锚点就只显示对应元素，隐藏其他所有，就保留先移除所有元素show类的代码，再给目标元素添加show类（把toggle换成add）。

注意事项 #

• 确保所有锚点的href属性值都是#加上页面中存在的id，不然会找不到目标元素；
• 如果你的页面是动态加载内容的，需要在内容加载完成后重新调用pageToggleMenu()函数，或者用事件委托的方式绑定点击事件（如果锚点是动态生成的）。

内容的提问来源于stack exchange，提问作者Andrew C. Duarte