Jquery 如何在单页设计上覆盖html页面？

我目前正在编写一个单页面设计-一个页面包含主页上的所有内容-在这里我有不同的链接到不同的外部内容页面，如single.html。 在这里，我正在搜索如何将单个页面覆盖在index.html上，这样平滑的导航将继续工作，您将站在用户所在的最后一个位置，例如公文包

在互联网上，我读到你可以用jQuery的函数load加载内容，但这似乎对我不起作用

代码如下所示：

$("#buttonContact").click(function(e){
    event.preventDefault();
    $.ajax({url:"contact.html",success:function(result){
         $("body").html(result);
       }});

});

也许这段代码不适合我。 对代码的简单解释是，当用户单击id为buttonContact的按钮时，contact.html应作为覆盖加载到主页上。我应该将单页标记为与索引相同的single.html，以及所有的标题等，还是应该从该页中删除一些代码片段

---

你会看到一个我的确切意思的工作示例。单击缩略图，内容将覆盖整个主页。

简单HTML。你可以把所有东西放在多个页面上，放在一个页面上。就这么简单

因此，如果您有一个带有指向不同页面链接的菜单栏：

<a href='home'>Home</a> <a href="contact">Contact</a>...

或

---

在谷歌上搜索单页设计，你会发现很多很棒的实现技巧。

这通常是通过javascript和jquery来动态切换页面内容的。与大量的html页面不同，您将有大量javascript来完成完全相同的事情，并基本上动态地写出html。您是指单个长页面设计，还是仅指当您单击链接而不刷新页面时交换内容的单个页面？

<a href="#home">Home</a> <a href="#contact">Contact</a>...

<h2 id="home">Hello, World!</h2>
<p>Lorem ipsum dolor sit amet...</p>

<h2 id="contact">Give us a call</h2>
<p>Lorem ipsum dolor sit amet...</p>

<section id="home">
    <h1>Hello, World!</h1>
    <p>Lorem ipsum dolor sit amet...</p>
</section>

<section id="contact">
    <h1>Give us a call</h1>
    <p>Lorem ipsum dolor sit amet...</p>
</section>