Linking internal .html pages in navbar with JQuery mobile 1.4.5
Is it a bad idea to link 4 different internal pages within your index.html navbar as .html files when your main data role has say for example 3 button links to other pages.
I basically want 4 different pages in the navbar than whats on the main first page, but can't do it as # in navbar, they just won't link? what am i doing wrong here?
also, when i refresh the width of the 3 buttons on main area go full width but I've set them to 60% in the css, sometimes it does that. Thanks!
<div data-role="page" id="page1" >
<img src="assetts/logo.png" alt="logo" class="center"/>
<h1></h1>
<!-- Page 1 Main -->
<div data-role="main" class="ui-content">
<ul data-role="listview" id="list">
<li><a href="#page2" class="ui-btn ui-shadow ui-btn-corner-all" data-transition="slide">Info</a></li>
<li><a href="#page3" class="ui-btn ui-shadow ui-btn-corner-all" data-transition="slide">Contact</a></li>
<li><a href="#page4" class="ui-btn ui-shadow ui-btn-corner-all" data-transition="slide">About</a></li>
</ul>
</div>
<!--Page 1 Footer-->
<div data-role="footer" data-position="fixed">
<!--Page 1 Navbar-->
<div data-role="navbar">
<ul>
<li><a href="gallery.html" class="ui-btn ui-icon-camera ui-btn-icon-top" data-transition="slide">Gallery</a></li>
<li><a href="media.html" class="ui-btn ui-icon-video ui-btn-icon-top" data-transition="slide">Media</a></li>
<li><a href="location.html" class="ui-btn ui-icon-location ui-btn-icon-top" data-transition="slide">Location</a></li>
<li><a href="news.html" class="ui-btn ui-icon-comment ui-btn-icon-top" data-transition="slide">News</a></li>
</ul>
</div>
</div>
</div>