请求解决：页面切换时为href值为#的链接添加类并修正光标样式

首先，咱们先拆解下你原代码里的几个问题，然后一步步修正：

原代码的核心问题 #

1. 事件绑定错误：$('body').on('change', ...) 完全不会触发——change事件只针对表单元素（比如输入框、下拉选单），body元素根本不会触发这个事件，所以你的代码从来没执行过；
2. 类名拼写错误：你写的cusrorDefault少了一个s，正确的应该是cursorDefault；
3. 缺少反向处理：没有给非href="#的链接移除目标类，页面切换后会出现样式混乱。

修正方案 #

第一步：先写好CSS样式 #

先定义目标类的样式，注意加!important覆盖默认的pointer光标（如果你的默认样式优先级高的话）：

.cursorDefault {
  cursor: default !important;
  /* 可选：如果想去掉链接下划线也可以加这行 */
  text-decoration: none;
}

第二步：封装复用的处理函数 #

把链接样式的逻辑封装成函数，方便在多个时机调用：

function updateLinkCursors() {
  // 先给所有链接移除目标类，避免残留
  $('a').removeClass('cursorDefault');
  // 再给所有href="#的链接添加类
  $('a[href="#"]').addClass('cursorDefault');
}

第三步：选择正确的触发时机 #

根据你的项目类型，选择对应的时机调用这个函数：

情况1：普通多页面网站

在页面加载完成时执行，同时处理可能的异步内容加载：

// 页面DOM加载完成后执行
$(document).ready(function() {
  updateLinkCursors();
});

// 页面所有资源（图片、异步内容）加载完成后再执行一次
$(window).on('load', function() {
  updateLinkCursors();
});

情况2：单页应用（SPA，比如基于hash路由）

监听路由变化事件，确保每次页面切换后都重新处理：

// 监听hash变化（比如从#page1跳到#page2）
$(window).on('hashchange', function() {
  // 加个小延迟，确保DOM已经更新完成
  setTimeout(updateLinkCursors, 100);
});

// 初始加载也要执行
$(document).ready(updateLinkCursors);

情况3：通过AJAX动态加载内容

如果你的页面是通过AJAX加载部分内容，要在内容加载完成后调用函数：

// 示例：加载某个页面片段后执行
$('#content-container').load('/new-content.html', function() {
  updateLinkCursors();
});

额外说明 #

如果你的项目用了Vue、React这类前端框架，不要用jQuery的方式处理，应该用框架的生命周期钩子：

• Vue：在mounted和updated钩子中执行类似逻辑；
• React：用useEffect监听路由变化，然后更新DOM样式。

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