Change Browser URL without reloading (refreshing) page using HTML5 in JavaScript and jQuery

Change Browser URL without reloading using JavaScript

<script type="text/javascript">

function ChangeUrl(title, url) {

    if (typeof (history.pushState) != "undefined") {

        var obj = { Title: title, Url: url };

        history.pushState(obj, obj.Title, obj.Url);

    } else {

        alert("Browser does not support HTML5.");

    }

}

</script>

<input type="button" value="Page1" onclick="ChangeUrl('Page1', 'Page1.htm');" />

<input type="button" value="Page2" onclick="ChangeUrl('Page2', 'Page2.htm');" />

<input type="button" value="Page3" onclick="ChangeUrl('Page3', 'Page3.htm');" />

Change Browser URL without reloading using jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">

    function ChangeUrl(page, url) {

        if (typeof (history.pushState) != "undefined") {

            var obj = { Page: page, Url: url };

            history.pushState(obj, obj.Page, obj.Url);

        } else {

            alert("Browser does not support HTML5.");

        }

    }

    $(function () {

        $("#button1").click(function () {

            ChangeUrl('Page1', 'Page1.htm');

        });

        $("#button2").click(function () {

            ChangeUrl('Page2', 'Page2.htm');

        });

        $("#button3").click(function () {

            ChangeUrl('Page3', 'Page3.htm');

        });

    });

</script>

<input type="button" value="Page1" id="button1" />

<input type="button" value="Page2" id="button2" />

<input type="button" value="Page3" id="button3" />