单击链接时如何在 div 上加载 html 页面（使用 AJAX 和 JQUERY）答案

【问题标题】：How do I load the html pages on a div when I click in a link (using AJAX AND JQUERY)单击链接时如何在 div 上加载 html 页面（使用 AJAX 和 JQUERY）
【发布时间】：2021-10-12 14:31:42
【问题描述】：

 <div id="menu"> 
  <nav>
  <ul class="nav_links">
    <li><a id ="homelink" href="#">Home</a></li>
    <li><a id="aboutlink" href="#">About</a></li>
    <li><a id="locationlink" href="#">Location</a></li>
  </ul>
  
</nav>
</div>

<Main id="main_container">
</Main>

现在我需要 AJAX 和 JQUERY 代码，当我单击其中一个锚点时，该代码来自文档的内容。 HTML 显示在 main_container 上。

例如：点击主页链接>在主容器上显示主页内容

【问题讨论】：

在 HTML 代码中，我忘记包含标签
请删除您的问题:)

标签： html jquery ajax

【解决方案1】：

您需要使用jQuery .load() method 来加载页面URL，并使用event.preventDefault 来防止重定向到页面本身，如下所示：

$('#menu .nav_links a').click(function(e) {
    e.preventDefault();
    var $this = $(this),
        $href = $this.attr('href');
    $('#main_container').load($href);
});

【讨论】：

还需要 preventDefault 否则会导航到 url，假设 OP 添加了一个 url，它当前是 href="#"
@freedomn-m 好收获！我越来越马虎了。
我不知道我做错了什么。即使我更改链接的 #，页面仍会在新页面上加载
我发现了错误，我不得不从标签中调用脚本。