升级jQuery至3.6.1+版本后load函数触发indexOf未定义错误

你的代码存在两个关键问题，导致升级到jQuery 3.6.1及以上版本时触发错误：

• 选择器范围错误：你绑定点击事件的选择器是$('.nav, #menu')，其中.nav对应HTML里的<ul class="nav nav-small flex-column">元素。这个<ul>标签没有href属性，点击它时$(this).attr('href')会返回undefined。jQuery 3.6.1+版本的load()函数对URL参数的校验更严格，尝试读取undefined的indexOf方法时就会抛出你看到的错误，而3.6.0版本对这种情况有容错处理，所以未报错。
• 重复ID问题：HTML中出现了两个<a id="menu">，ID在文档中必须唯一，这属于无效的HTML结构，可能引发选择器匹配异常。

解决方案 #

方案1：修正选择器，仅绑定有效链接元素

把选择器改成只针对有href属性的目标链接，同时修复重复ID的问题：

$(document).ready(function() {
  // 绑定到子菜单里的所有.nav-link，或用修正后的class选择器
  $('#submenu-3 .nav-link').click(function(e) {
    e.preventDefault();
    $('#content').load($(this).attr('href'));
  });
});

修改HTML中的重复ID为class：

<li class="nav-item">
  <a class="nav-link menu" href="practise.php">Practice</a>
</li>
<li class="nav-item">
  <a class="nav-link menu" href="statistics.php">Statistics</a>
</li>

如果用class选择器，JS里可以改成$('.menu')。

方案2：添加参数校验，避免传入undefined

如果需要保留原选择器范围，在调用load()前先检查href是否有效：

$(document).ready(function() {
  $('.nav, .menu').click(function(e) {
    e.preventDefault();
    const href = $(this).attr('href');
    // 排除href为空或#的无效情况
    if (href && href !== '#') {
      $('#content').load(href);
    }
  });
});

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