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>

Google搜索“单页设计”，您会发现很多很棒的实施技巧。

如何在单页设计上叠加html页面？

1 个答案: