Untitled

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/jquery.css">

    <script src="js/dependencies/jquery.js"></script>
    <script src="js/dependencies/jquery.mobile.js"></script>
    <script src="js/dependencies/ejs.js"></script>

</head>

<body>

   <div data-role="page" id="page-homepage" class="my-page" data-theme="b">
       <div data-role="header" class="div-header">
           // some header contents
       </div>
       <div role="main" class="ui-content">
           // some contents
       </div>
   </div>
   .
   .
   <div data-role="page" id="page-login" class="my-page" data-theme="b">
       <div role="main" class="ui-content">
           // login contents
       </div>
   </div>
   .
   .
   <script>

        /* jQuery Mobile pagecontainer change function's options */
        var changePageOptions = {
            transition: 'none',
            changeHash: true,
            reverse: true,
            showLoadMsg: true
        };

        $("#btn-page-login").on("tap", function() {
            $(':mobile-pagecontainer').pagecontainer('change', '#page-login', changePageOptions);
        });

   </script>

</body>
</html>