如何在一页设计上覆盖html页面

Question

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

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

代码如下所示：

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

也许这段代码对我不起作用。代码的简单解释是，当用户单击id为buttonContact的按钮时，contact.html应该作为主页上的覆盖加载。我应该将单个页面single.html标记为与索引相同，包括所有head内容等吗？还是应该从该页面中删除一些代码片段？

在www.dangblast.com上，你会看到一个我的确切意思的例子。点击缩略图，内容将覆盖整个主页。

Answer 1

简单HTML。你可能放在多页上的所有内容，都放在一页上。就这么简单。

因此，如果你有一个菜单栏，其中包含指向不同页面的链接：

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

改为使用页面锚点，如：

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

（请注意，唯一的区别是href属性中的散列标记（#）。）

在页面的每个部分，只需在标题或分区元素中添加一个id属性：

<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>

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