我想根据菜单页面更改URL,以便轻松共享与他人的链接,因为每个页面都有自己的URL名称。
因此,我有一个加载文件内容的功能。但是如何将url更改也实现到函数中呢?
<script>
function getfile(data) {
var file= data+'.html';
$('#content').load(file);
}
</script>
这是使用
onclick
功能的导航。<ul>
<li><a href="#" onclick="getfile('profile')">Profile</a> </li>
<li><a href="#" onclick="getfile('about')">About</a> </li>
<li><a href="#" onclick="getfile('contact')">Contact</a> </li>
</ul>
<div id="content"></div>
最佳答案
您可以使用History API。 pushState
method允许您更改当前页面的URL,而无需重新加载内容。
例:
<script>
function getfile(data) {
var file= data+'.html';
$('#content').load(file);
history.pushState(null, null, file);
}
</script>
您可能还对the
popstate
event感兴趣,以检测浏览器何时返回上一页。更新:
为了加载子目录的文件,您将需要知道站点根目录的路径。如果站点位于根目录下,则类似以下的内容将起作用。
<script>
var rootPath = '/';
function getfile(data) {
var file= rootPath+data+'.html';
$('#content').load(file);
history.pushState(null, null, file);
}
</script>