我帮你排查了下代码，发现两个关键问题导致点击“Why?”按钮后页面无反应：

1. jQuery选择器错误 #

你在mainp.js里使用的选择器$("reason")是错误的——这个写法是用来匹配<reason>标签的，但你的目标元素是id为reason的a标签，jQuery中id选择器需要加上#前缀才能正确匹配。

2. a标签的默认跳转行为未阻止 #

你的“Why?”按钮是一个<a>标签，且href属性为空，点击时浏览器会触发默认的页面跳转行为（刷新当前页面），这会打断jQuery的load操作，导致外部内容还没加载完成就被页面刷新冲掉了。

修改后的代码 #

修正后的mainp.js：

$(document).ready(function(){
  $("#reason").click(function(event){
    // 阻止a标签的默认跳转行为
    event.preventDefault();
    $("#article").load("Reason.html");
  });
});

可选优化：

你也可以直接给a标签的href设置为javascript:void(0)，从根源避免浏览器触发默认跳转，同时保留标签的点击样式：

<li><a href="javascript:void(0)" id="reason">Why?</a></li>

另外还要确认两个前提条件：

• Reason.html文件和当前HTML文件在同一目录下
• 浏览器控制台没有跨域或404错误（可以按下F12打开开发者工具，查看Console和Network标签页排查加载问题）

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