jquery мобильная навигационная панель одинакова на всех страницах, расположенных в одном файле

Question

Вопрос: Я пытаюсь поместить одну и ту же панель навигации на все страницы на мобильном телефоне jquery, но у меня есть только один файл HTML, и я поместил все свои страницы в один файл (индекс. html) если я помещу тот же самый navbar на вторую страницу, то вторая страница не будет работать, как я могу поставить тот же самый navbar, если мой индекс. html макет как этот ???

<!-- Start of the first page -->
<div data-role="page" id="foo">
    <div data-role="header">
        <h1>Foo</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
        <p>I'm first in the source order so I'm shown as the page.</p>
        <p>View internal page called <a href="#bar">bar</a></p>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

<!-- Start of second page -->
<div data-role="page" id="bar">

    <div data-role="header">
        <h1>Bar</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
        <p><a href="#foo">Back to foo</a></p>
    </div><!-- /content -->
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->