更改html内容和网址,无需像Facebook导航菜单那样重新加载页面

时间:2014-06-28 21:32:10

标签: javascript jquery ajax web-applications

我有一个包含2个html页面的网站(contact.html和index.html)。我的网站上有一个菜单侧边栏和一个内容div。

我想要两件事:

1.切换菜单中的2个html页面,但没有重新加载整个页面。我想用JavaScript或jQuery加载我的内容div中的html页面并更改URL。

2.我希望可以使用单独的URL访问这些html页面。

本网站的最佳结构是什么?我在想一个像structure.html这样的html文件,它包含一个侧边栏和一个内容div,如果用户想要加载mydomain.com,请加载structure.html并在内容div中加载index.html,如果用户想要加载mydomain .com / contact,加载structure.html并在内容div中加载contact.html。但我现在不怎么样。

我每页应该有2个html文件吗?例如联系页面:一个html文件可以从mydomain.com/contact访问,另一个用于在内容div中加载ajax并从菜单访问。

1 个答案:

答案 0 :(得分:1)

您可以通过操作DOM来更改页面内容而无需重新加载。这里有extensive API以及数百个库来实现这一目标。

更改网址而不重新加载会使用history pushState API(请参阅history.pushState and jQuery)。

  • jQuery - 简单的DOM操作
  • React - facebook用于操纵DOM。
  • Ember - 单页应用程序的一个框架中的一个很好的。