我最近发现了如何使用History.js,jQuery和ScrollTo使用HTML5 History API对网站进行Ajax化的要点:https://github.com/browserstate/ajaxify
我很难得到这个工作的简单版本,我不确定我理解一切.首先,我加载了gist中提供的所有脚本,然后设置了一个非常简单的导航和内容部分:
<ul id="nav">
<li id="home-link"><a href="/" title="Home">Home</a>/</li>
<li id="work-link"><a href="/work" title="Work">Work</a>/</li>
<li id="labs-link"><a href="/labs" title="Labs">Labs</a>/</li>
<li id="blog-link"><a href="/blog" title="Blog">Blog</a>/</li>
<li id="contact-link"><a href="/contact" title="Contact">Contact</a></li>
</ul>
<div id="content"></div>
接下来,我更改了选择器变量以匹配html:
/* Application Specific Variables */
contentSelector = '#content',
$content = $(contentSelector),
contentNode = $content.get(0),
$menu = $('#nav'),
activeClass = 'active',
activeSelector = '.active',
menuChildrenSelector = 'li',
接下来应该做的就是我迷路的地方.我想要做的就是加载特定于所选导航链接的html内容.因此,如果我点击"工作",我想将work.html文件加载到内容部分,并将网址更改为"mywebsite.com/work".为了让事情变得简单,可以说work.html和所有其他可共享的内容都位于同一目录中.
任何帮助是极大的赞赏!干杯!