切换页面区块后Burger图标点击无响应的JS问题求助

首先咱们来拆解下汉堡菜单点击失效的核心问题：

• 你的JavaScript代码只在页面加载时，给第一个出现的.burger i元素绑定了点击事件，但切换到#contacts、#cart等区块后，这些区块里的新汉堡图标并没有被绑定事件，自然点击没反应。
• 另外HTML里存在大量冗余重复代码（每个区块都复制了一份header），还在#delivery的logo onclick里写错了document.getElementById('about')（这个元素根本不存在），同时重复引入了site.js，这些都会导致逻辑混乱。

下面是优化后的完整解决方案：

1. 重构HTML结构（移除冗余重复header） #

把导航栏从各个区块里抽出来，放在所有内容区块外面——导航栏是全局组件，没必要每个页面区块都复制一份。这既减少冗余，也从根源避免了多个汉堡图标的事件绑定问题：

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
 <link rel="stylesheet" href="./site.css">
 <title>Атлас</title>
</head>
<body>
 <!-- 全局导航栏，仅保留一份 -->
 <header class="header">
  <a href="#main" class="logo-link"><img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!"></a>
  <ul class="nav">
   <li class="navlink"><a href="#contacts" class="section-link">Контакты</a></li>
   <li class="navlink"><a href="#delivery" class="section-link">Доставка</a></li>
   <li class="navlink"><a href="#cart" class="section-link">Корзина</a></li>
  </ul>
  <div class="burger">
   <i class="fas fa-bars"></i>
  </div>
 </header>

 <!-- 各内容区块 -->
 <div id="main" class="content-section" style="display:block">
  <!-- 此处放置#main的内容 -->
 </div>
 <div id="contacts" class="content-section" style="display:none">
  <!-- 此处放置#contacts的内容 -->
 </div>
 <div id="delivery" class="content-section" style="display:none">
  <!-- 此处放置#delivery的内容 -->
 </div>
 <div id="cart" class="content-section" style="display:none">
  <!-- 此处放置#cart的内容 -->
 </div>
 <div id="payment" class="content-section" style="display:none">
  <!-- 此处放置#payment的内容 -->
 </div>

 <script src="./site.js"></script>
</body>
</html>

2. 优化JavaScript代码（统一处理区块切换与汉堡菜单） #

把所有交互逻辑移到JS中，移除HTML内的inline onclick，同时确保汉堡菜单事件绑定稳定，区块切换逻辑更简洁：

// 汉堡菜单逻辑
const burger = document.querySelector('.burger i');
const nav = document.querySelector('.nav');

function toggleNav() {
 burger.classList.toggle('fa-bars');
 burger.classList.toggle('fa-times');
 nav.classList.toggle('nav-active');
}

burger.addEventListener('click', toggleNav);

// 区块切换逻辑
const sectionLinks = document.querySelectorAll('.section-link');
const logoLink = document.querySelector('.logo-link');
const contentSections = document.querySelectorAll('.content-section');

// 切换指定区块的通用函数
function switchSection(targetId) {
 // 隐藏所有区块
 contentSections.forEach(section => {
  section.style.display = 'none';
 });
 // 显示目标区块
 document.getElementById(targetId).style.display = 'block';
 // 移动端切换区块后自动收起菜单
 if (window.innerWidth <= 800) {
  toggleNav();
 }
}

// 绑定导航链接点击事件
sectionLinks.forEach(link => {
 link.addEventListener('click', (e) => {
  e.preventDefault(); // 阻止默认锚点跳转
  const targetId = link.getAttribute('href').slice(1); // 移除#号
  switchSection(targetId);
 });
});

// 绑定Logo点击事件，返回主页面
logoLink.addEventListener('click', (e) => {
 e.preventDefault();
 switchSection('main');
});

3. 可选：CSS细节优化 #

如果要避免内容被导航栏遮挡，可以给内容区块添加样式：

.content-section {
 margin-top: 70px; /* 与header高度一致，避免内容被导航栏覆盖 */
 min-height: calc(100vh - 70px);
}

方案优势 #

• 全局导航栏仅一份，意味着只有一个汉堡图标，初始绑定的事件会一直有效，不会因切换区块失效。
• 用JS统一处理区块切换，移除冗余的inline onclick代码，逻辑更清晰，也避免了拼写错误（比如之前的about元素不存在的问题）。
• 移动端切换区块后自动收起导航菜单，提升用户体验。

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