You can fix it if you move your last page to be a next to the last.
Working example: ....... removed .......
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
<div data-role="page" class="pages" id="fixturefootball">
<div data-role="header">
<a href="#"class="showMenu" data-shadow="false" data-iconshadow="false" data-icon="bars" data-role="button" data-iconpos="left">Menu</a>
<h1>F</h1>
</div><!-- /header -->
<div data-role="content">
<div class="article">
<h2>DOESNT WORK - DOESNT NAVIGATEEEE !!</h2>
</div><!-- /article -->
</div><!-- /content -->
<div data-role="footer" data-theme="c" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#football">C</a></li>
<li><a href="#overfootball">B</a></li>
<li><a href="#tablefootball">P</a></li>
<li class="active"><a href="#fixturefootball">F</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
<div data-role="page" class="pages" id="tablefootball">
<div data-role="header">
<a href="#"class="showMenu" data-shadow="false" data-iconshadow="false" data-icon="bars" data-role="button" data-iconpos="left">Menu</a>
<h1>F</h1>
</div><!-- /header -->
<div data-role="content">
<div class="article">
<h1>L</h1>
<div>
<table id="tables" class="imagetable">
</table>
</div>
</div><!-- /article -->
<div data-role="footer" data-theme="c" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#football">C</a></li>
<li><a href="#overfootball">B</a></li>
<li class="active"><a href="#tablefootball">P</a></li>
<li><a href="#fixturefootball">F</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->