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

Question

I want to change the url according to the menu pages, so to easily share a link to someone else, since each page has its own url name.

So, I have a function that loads the file content. But how to implement it with the url change also into the function?

<script>
    function getfile(data) {
        var file= data+'.html';
        $('#content').load(file);
    }
</script>

Here is the navigation using onclick function.

<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

You could use the History API . The pushState method will allow you to change the current page's URL, without reloading the content.

Example:

<script>
    function getfile(data) {
        var file= data+'.html';
        $('#content').load(file);
        history.pushState(null, null, file);
    }
</script>

You may also be interested in the popstate event , to detect when the browser travels back to the previous pages.

Update:

In order to load files for a sub directory, you will need to know the path to the root directory for the site. Something like the following will work if the site is at the root directory.

<script>
    var rootPath = '/';
    function getfile(data) {
        var file= rootPath+data+'.html';
        $('#content').load(file);
        history.pushState(null, null, file);
    }
</script>