我想根据菜单页面更改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 APIpushState 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>

10-05 20:59
查看更多