pushState Don't work

Question

so i have this menu :

<ul id="body-nav">
                <li class="menu1"><a href="#">Meet The Team</a></li>
                <li class="menu2"><a href="what-we-do">What We Do</a></li>
                <li class="menu3"><a href="#">See Us In Action</a></li>
                <li class="menu4"><a href="#">Get In Touch</a></li>
            </ul>

The Thing is that i want to use the "pushState" event to change the URL of my website because the site depend a lot on javascript. in my script the code is:

$("#body-nav .menu2 > a").click(function () {
    history.pushState("", "What We Do", $("#body-nav .menu2 > a").attr("href"));
});

based on my google searches, it was supposed to work, but every time i click it this error appear: The requested URL /mainsite/what-we-do was not found on this server

thank you for any help.

Answer 1

You have to cancel the default action of the link.

$("#body-nav .menu2 > a").click(function (event) {
    history.pushState("", "What We Do", $("#body-nav .menu2 > a").attr("href"));
    event.preventDefault(); // <==
});