Question

所以我想要实现的是拥有一个链接列表，点击其中的任何一个链接都会将div的内容更改为＆＃39;无论是什么＆＃39;。这很简单，我已经做到了。

我遇到问题的部分是对变更后的内容进行某种固定。

 say main domain is www.example.com
 then you click link X and content Y shows up on the page
 then the URL should change to www.example.com/SOMETHINGHERE
 --all good so far--
 then using the new link should take you to the site with the changed content

让我们获取一些示例代码：

<a href="something.html" class="linx" >Click me</a> 
<a href="something2.html" class="linx" > Click me too</a>
<div id="loadhere"></div>

$('.linx').click(function (event) {
    event.preventDefault();
    $('#loadhere').load(this.href);
});

非常基本的东西。这就是它的工作方式。现在我用谷歌搜索了一下，似乎我需要使用历史API甚至是history.js库。我修改了一下，但我是一个新手，整个历史事件有点令人困惑。

接近我想要实现的一个例子是Soulwire's personal website. 导航到实验部分，看看如何运行每个实验部分。

所以基本上我要问的是你是否可以帮助我使用历史api（如果这实际上是这样做的方式 - 我可能是错的）也许给我一个例子或者更多的东西来链接文档，或者如果有其他方法我可以尝试实现这一点。

提前致谢。

Answer 1

使用window.history.pushState()功能，您可以更改地址栏中的内容。 pushState（）是指将网站所处的状态推送到历史记录中的操作，以便用户可以使用浏览器导航按钮进行导航：

history.pushState(stateObj, 'page title', 'pathname');

在代码中实现它：

$('.linx').click(function (event) {
    event.preventDefault();
    $('#loadhere').load(this.href);
    // use push state here        
    var stateObj = {'foo': 'bar'};
    history.pushState(stateObj, this.href.replace('.html', ''), this.href);
});

stateObject可以存储一些定义您网站所处状态的数据，即。勾选的复选框或滚动状态。

您可以使用history.state访问此对象。所以对于上面的例子：

history.state.foo = "bar"

请注意，这是一个现代网络标准，必须采取措施确保与旧浏览器的兼容性。

详细了解history.pushState() here。

动态更改内容并替换当前URL

1 个答案: