我目前正在编写一个单页设计 - 一页包含主页上的所有内容 - 我有不同的外部内容页面链接,如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上,您将看到我的确切含义的实例。点击缩略图,内容将覆盖整个主页。
答案 0 :(得分:0)
简单的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搜索“单页设计”,您会发现很多很棒的实施技巧。