Response title
This is preview!
Persistent navigation between # pages
in jQuery Mobile
•
10 years ago
i'd like to have a persistent navigation footer on my page (like here: http://jquerymobile.com/demos/1.0a2/#docs/toolbars/footer-persist-a.html ). i am using the exact code being used there, and yet the footer is rendering multiple times on one page (with different items selected). one bar is appearing right under my content and the other at the bottom of the page. clicking on either seems to work (takes me to the page i clicked on), though it is buggy.
the only difference between my code and that code is that i'm moving between # pages, and they're moving between .html pages. here's my code:
<div data-role="page" id="list_page">
<div data-role="content">
</div><!-- /content -->
<div data-role="footer" data-id="navigation" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#list_page" class="ui-btn-active">List</a></li>
<li><a href="#add_page">Add</a></li>
<li><a href="#prof_page">Profile</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="add_page">
<div data-role="content">
<div id="add_content">
</div><!-- /content -->
<div data-role="footer" data-id="navigation" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#list_page">List</a></li>
<li><a href="#add_page" class="ui-btn-active">Add</a></li>
<li><a href="#prof_page">Profile</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="prof_page">
<div data-role="content">
<div id="add_content">
</div><!-- /content -->
<div data-role="footer" data-id="navigation" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#list_page">List</a></li>
<li><a href="#add_page">Add</a></li>
<li><a href="#prof_page" class="ui-btn-active">Profile</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
does anyone know why this isn't working?
thanks.
6
