jQuery实现点击锚点修改p标签文本颜色的代码失效问题排查

失效根本原因 #

当前index.html文件中没有引入jQuery核心库，浏览器无法解析你写的jQuery语法，打开开发者工具控制台会直接看到jQuery is not defined的报错，所有绑定的点击事件自然无法执行。

附加优化点 #

a标签设置href="#"后，点击时会触发浏览器默认的跳转顶部行为，虽不直接影响改色效果，但会导致页面滚动位置异常，建议在点击事件中拦截该默认行为。

修复操作 #

1. 将下载好的jQuery库文件放到项目目录下，引入jQuery的代码必须放在main.js引入语句的前面，index.html底部的脚本部分修改为：

   <!-- 路径替换为你本地实际存放的jQuery文件路径 -->
   <script src="jquery.min.js"></script>
   <script src="main.js"></script>
   

2. 更新main.js代码，增加阻止锚点默认跳转的逻辑：

   jQuery(function ($) {
       $('#test').click(function (e) {
           // 阻止锚点默认行为
           e.preventDefault();
           $("p").css("color", "yellow");
       });
   });
   

3. 刷新页面点击测试链接，p标签文本即可正常变为黄色。若仍有异常，查看控制台的报错提示即可定位剩余问题。

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