Question

我想根据菜单页面更改网址，以便轻松与其他人分享链接，因为每个网页都有自己的网址名称。

所以，我有一个加载文件内容的函数。但如何用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>

Answer 1

您可以使用History API。 pushState method将允许您更改当前网页的网址，而无需重新加载内容。

实施例

<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>

如何在使用jQuery.load时获取和更改url

1 个答案:

实施例

更新