如何在URL哈希匹配指定div类名时为其自动添加active类

原有代码问题 #

• document.querySelector(".panel")只会匹配页面第一个类为panel的元素，所以始终只能给第一个面板添加active类
• 硬编码判断#red的逻辑不通用，无法适配其他哈希值的场景

通用原生JS实现代码 #

// 等待DOM结构完全加载后再执行逻辑，避免找不到面板元素
document.addEventListener('DOMContentLoaded', function() {
  // 提取哈希值并去掉开头的#，无哈希时得到空字符串
  const targetPanelClass = window.location.hash.slice(1)
  // 哈希值非空才执行匹配逻辑
  if (!targetPanelClass) return

  // 直接匹配同时携带panel类和目标哈希类的面板元素
  const targetPanel = document.querySelector(`.panel.${targetPanelClass}`)
  // 找到对应元素再添加active类，避免不存在元素时报错
  if (targetPanel) {
    targetPanel.classList.add('active')
  }
})

可选增强功能（哈希变化自动切换） #

如果需要支持用户修改地址栏哈希后自动切换激活的面板，可以新增哈希变化监听逻辑：

window.addEventListener('hashchange', function() {
  // 先清空所有已有active状态的面板
  document.querySelectorAll('.panel.active').forEach(item => {
    item.classList.remove('active')
  })
  const targetPanelClass = window.location.hash.slice(1)
  if (!targetPanelClass) return

  const targetPanel = document.querySelector(`.panel.${targetPanelClass}`)
  if (targetPanel) {
    targetPanel.classList.add('active')
  }
})

提示：如果你的面板类名包含特殊字符，需要先对哈希值做转义处理，常规英文、数字、短横线、下划线组成的类名无需额外处理。

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