<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery.mobile.activePage demo</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <style> #myResult { border: 1px solid; border-color: #108040; padding: 10px; } </style> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h1>Page 1</h1> </div> <div data-role="content"> <a href="#page2" data-role="button" data-inline="true">Go to Page 2</a> <input type="button" value="Which Page is this?" class="myButton" data-inline="true"/> <br> <div class="myResult">The result will be displayed here</div> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <h1>Page 2</h1> </div> <div data-role="content"> <a href="#page1" data-role="button" data-inline="true">Go to Page 1</a> <input type="button" value="Which Page is this?" class="myButton" data-inline="true"/> <br> <div class="myResult">The result will be displayed here</div> </div> </div> <script> $(function() { $( ".myButton" ).on( "click", function() { var whichPageId = $.mobile.activePage.attr( "id" ); $( ".myResult" ).html( "This is " + whichPageId ); }); }); </script> </body> </html>