<section id="page-1" data-role="page">
                <header data-role="header">
                    <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide"
                       data-direction="reverse">Back</a>
                    <h1>Page 1</h1>
                </header>
                <div data-role="content">
                    <pre>

                    </pre>
                </div>
                <footer data-role="footer" data-position="fixed">
                    <div data-role="navbar" class="navbar_btn">
                        <ul>
                            <li><a href="#page-1" data-icon="grid" class="ui-btn-active">Page 1</a></li>
                            <li><a href="#page-2" data-icon="grid">Page 2</a></li>
                            <li><a href="#page-3" data-icon="grid">Page 3</a></li>
                        </ul>
                    </div>
                </footer>
            </section>
        

            <section id="page-2" data-role="page">
                <header data-role="header">
                    <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide"
                       data-direction="reverse">Back</a>
                    <h1>Page 1</h1>
                </header>
                <div data-role="content">
                    <pre>

                    </pre>
                </div>
                <footer data-role="footer" data-position="fixed">
                    <div data-role="navbar" class="navbar_btn">
                        <ul>
                            <li><a href="#page-1" data-icon="grid">Page 1</a></li>
                            <li><a href="#page-2" data-icon="grid" class="ui-btn-active">Page 2</a></li>
                            <li><a href="#page-3" data-icon="grid">Page 3</a></li>
                        </ul>
                    </div>
                </footer>
            </section>
        

            <section id="page-3" data-role="page">
                <header data-role="header">
                    <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide"
                       data-direction="reverse">Back</a>
                    <h1>Page 1</h1>
                </header>
                <div data-role="content">
                    <pre>

                    </pre>
                </div>
                <footer data-role="footer" data-position="fixed">
                    <div data-role="navbar" class="navbar_btn">
                        <ul>
                            <li><a href="#page-1" data-icon="grid">Page 1</a></li>
                            <li><a href="#page-2" data-icon="grid">Page 2</a></li>
                            <li><a href="#page-3" data-icon="grid" class="ui-btn-active">Page 3</a></li>
                        </ul>
                    </div>
                </footer>
            </section>
        

            $(".navbar_btn a").each(function () {
                var anchor = $(this);
                anchor.bind("click", function () {
                    $.mobile.changePage(anchor.attr("href"), {
                        transition: "none",
                        changeHash: false
                    });
                    return false;
                });
            });