JavaScript页面切换异常求助：点击导航图标两次跳转错误页面

我正在做课程项目，开发了一款可通过点击底部图标切换页面的类App应用。目前遇到以下问题：

• 点击Home图标两次会跳转到错误页面（如page2）
• 期望行为：点击对应图标时稳定跳转到目标页面（点击Home到首页、点击Search到搜索页等）

已尝试添加if语句判断当前页面，但问题仍存在。已附上HTML代码、JavaScript代码及问题复现视频。

1. 修正页面状态判断逻辑 #

确保每次点击图标时，先明确当前活跃页面，对比目标页面后再执行切换，避免重复触发导致逻辑混乱。示例代码：

const navIcons = document.querySelectorAll('.nav-icon');
let currentPage = 'home'; // 初始页面标记

navIcons.forEach(icon => {
  icon.addEventListener('click', () => {
    const targetPage = icon.dataset.page; // 假设图标通过data-page标记目标页面
    // 如果点击的是当前页面，直接返回不执行切换
    if (targetPage === currentPage) return;
    
    // 执行页面切换：隐藏当前页面，显示目标页面
    document.querySelector('.page.active')?.classList.remove('active');
    document.querySelector(`.page#${targetPage}`)?.classList.add('active');
    currentPage = targetPage; // 更新当前页面状态
  });
});

2. 排查事件绑定重复问题 #

如果页面存在动态渲染逻辑，可能导致同一图标被重复绑定点击事件，多次触发切换。可以改用事件委托避免这个问题：

// 将事件绑定到导航容器，而非单个图标
document.querySelector('.nav-container').addEventListener('click', (e) => {
  const targetIcon = e.target.closest('.nav-icon');
  if (!targetIcon) return;
  
  const targetPage = targetIcon.dataset.page;
  if (targetPage === currentPage) return;
  
  // 执行页面切换逻辑
  document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
  document.querySelector(`.page#${targetPage}`)?.classList.add('active');
  currentPage = targetPage;
});

3. 检查DOM切换操作的完整性 #

确保每次切换时，所有非目标页面都被设为隐藏状态，避免多个页面同时处于"活跃"状态：

// 错误示例：仅给目标页面添加活跃类，未移除其他页面的
document.querySelector(`.page#${targetPage}`).classList.add('active');

// 正确示例：先清除所有页面的活跃状态，再设置目标页面
document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
document.querySelector(`.page#${targetPage}`).classList.add('active');

4. 定位异常触发点 #

在点击事件中添加控制台打印，观察第二次点击时的目标页面和当前页面值，确认逻辑执行是否符合预期：

icon.addEventListener('click', () => {
  const targetPage = icon.dataset.page;
  console.log('当前页面:', currentPage, '目标页面:', targetPage);
  // ...后续切换逻辑
});

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