jQuery load实现无刷新加载页面 子菜单链接跳转异常问题咨询

你的代码失效是两个核心错误导致的：

• 折叠子菜单的div标签写了两个id属性：<div id="submenu-2" class="collapse" id="nav">。HTML规范明确要求单个元素只能定义一个id属性，重复写id时浏览器只会识别第一个值submenu-2，第二个id="nav"会被直接忽略，jQuery的#nav选择器根本匹配不到这个子菜单容器，点击事件自然绑定不上。
• 你修改后的选择器#nav ul li a兼容性极差：就算id没写错，这个选择器也只能匹配嵌套在ul>li结构里的链接，原来下拉菜单里直接放在#nav容器下的a标签会失效，后续动态渲染的导航项也绑定不上事件。

1. 先修正HTML结构错误
   删掉子菜单上重复定义的id，注意id在整个页面必须唯一，不能给多个元素设置重复id。给所有需要触发无刷新加载的导航区域统一加一个公共类nav-container，方便统一绑定事件：
   原来正常工作的下拉菜单修改为：

<div class="dropdown-menu nav-container" id="main-nav">
  <a href="../exercises/match_pinyin.php" class="dropdown-item">Profile</a>
</div>

折叠子菜单修改为（删掉重复的id="nav"，加上公共类）：

<div id="submenu-2" class="collapse nav-container">
  <ul class="nav nav-small flex-column">
    <li class="nav-item">
      <a class="nav-link" href="../exercises/match_pinyin.php">Γραπτές Ασκήσεις</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="pages-utility.html">Utility Pages</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="pages-layouts.html">Layouts</a>
    </li>
  </ul>
</div>

2. 替换jQuery脚本为事件委托写法
   事件委托可以匹配所有导航容器下的a链接，不管是直接放在容器里的下拉项，还是嵌套在列表里的子菜单项，甚至后续动态追加的导航链接都能正常触发无刷新加载：

<script>
$(document).ready(function() {
  // 绑定所有.nav-container下a标签的点击事件
  $(document).on('click', '.nav-container a', function(e) {
    e.preventDefault();
    const targetPage = $(this).attr('href');
    // 可选：加加载状态提升体验
    $('#content').html('<p style="text-align:center;padding:2rem;">加载中...</p>');
    $('#content').load(targetPage, function(res, status) {
      // 可选：加载失败兜底提示
      if (status === 'error') {
        $('#content').html('<p style="color:red;padding:2rem;">页面加载失败，请检查链接是否正确</p>');
      }
    });
  });
});
</script>

如果你不想修改HTML加公共类，也可以直接在选择器里同时匹配两个导航容器的id，但是后续新增导航区域时需要手动修改选择器，维护成本更高：

<script>
$(document).ready(function() {
  $(document).on('click', '#main-nav a, #submenu-2 a', function(e) {
    e.preventDefault();
    $('#content').load($(this).attr('href'));
  });
});
</script>

注意：千万不要在同一个页面给多个元素设置相同id，这类问题很难排查，会导致所有依赖id的CSS、JS功能出现莫名其妙的异常。

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