2014-10-30 134 views
0

我希望有人能帮助/指向我在这里正确的方向。网页设计模式/解决方案

选项1

我作出这样的具有导航菜单一个基本的网站,我可以在导航链接的列表,每个环节都会有一个相应的页面相同的标题,导航,页脚和不同的主要内容。所以当链接被点击后,整个页面再次加载,但仍然看起来相同,除了不同的主要内容。

选项2

我作出这样的具有导航菜单,页眉,页脚和主要DIV的站点。有一个jquery函数,当点击nav中的li时。只显示所需内容的相应页面会显示在主div中。有了这个只有主div被加载,页面的其余部分(导航,页眉,页脚,你不会刷新)。 风格布局保持不变只有主要内容不同..

所以现在。随着选项1

  • 整个页面刷新,
  • 我可以给一个链接到一个specfic页面内容(即http://domain.com/page2.html)和整个页面加载与导航,页眉,页脚等
  • 如果我得到一个谷歌的命中page3.html内容和我点击它,http://domain.com/page3.html将与导航,页眉,页脚等加载...

利用选2.


所以

  • 有没有办法像第二个选项一样创建一个页面,只有主div才能刷新相应页面的内容,而该页面没有导航,页眉,页脚,当导航项被点击时?
  • ,但它仍然有对具有不同的主要内容保持相同的导航,页脚,标题中的每个页面unigue网址..
  • ,然后如果用户来通过搜索引擎,他们将获得完整的页面布局(导航,页脚,标题)与该页面的内容,而不仅仅是内容。

我希望我有此足够清楚了解什么即时试图实现

基本上我想创建的导航,页眉,页脚留静态页面,只有主DIV重新加载时,每个L1项目被点击。但我需要每个网页都有一个唯一的网址,并且可以为搜索引擎用户加载所需内容的整个网页。

+0

如果要加载与AJAX(选项2)的网页,但仍更改URL,你可以使用[HTML5 pushstate](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history)动态更改URL。这个例子可以在[Gifavs.com](http://gifavs.com)(我所做的)中看到。 – Nathan 2014-10-30 01:04:15

+0

嗨,是的,当使用选项1时,一切都很好,只有当我点击一个导航链接。整个页面刷新,重新加载标题,导航,页脚和新的div内容。我只想在点击导航链接时加载新的div内容。而不是刷新导航,页脚,标题等。 – user2897821 2014-10-30 01:06:39

回答

3

这听起来像你正在寻找PJAX - 或带有AJAX的pushState。基本上,所有请求都是通过ajax完成的,但是您使用pushState(不会导致刷新)更新地址栏。

一个轻量级的框架存在(由YouTube开发和喜欢的GitHub网站使用)称为spfjs,在处理这个助攻(以及处理回退...)

https://github.com/youtube/spfjs

如果你感兴趣的只是一个简单的解决方案pjax,一个jQuery插件,可以在这里找到:

https://github.com/defunkt/jquery-pjax

+0

还有一个名为[pjax](https://github.com/defunkt/jquery-pjax)(这是GitHub使用的)。 – Nathan 2014-10-30 01:06:34

+0

谢谢你,这看起来更多沿着我试图做的事情。将不得不摆弄这一点,看看我是否有任何地方。 – user2897821 2014-10-30 01:11:38