【发布时间】：2013-04-26 07:59:57
【问题描述】：
我在 PhoneGap 项目上。我使用 jquery 移动框架。
我在导航方面遇到了一些问题。
我有一个主页，它首先出现在屏幕上。在我从面板中选择一个子菜单后（我没有使用 jqm 面板，我自己创建的），另一个页面出现了，这个页面在它自己的页脚上有导航。我点击页脚导航，效果很好，但是当我点击第四个按钮时，它没有导航到相关页面。
这里是示例代码。
<!doctype html>
<html>
<head>
<title>Fanatik Score</title>
<meta charset="utf-8">
<meta id="extViewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/jquery.mobile.min.css" />
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<style type="text/css">
.ui-page { -webkit-backface-visibility: hidden; }
</style>
</head>
<body>
<div id="menu">
<h3>Menu</h3>
<ul data-role="listview" data-theme="d">
<li class="active"><a href="#home" class="contentLink" data-ajax="false">C</a></li>
<li><a href="#football" class="contentLink" data-ajax="false">F </a></li>
<li><a href="#basketball" class="contentLink" data-ajax="false">B </a></li>
<li><a href="#volleyball" class="contentLink" data-ajax="false">V </a></li>
<li><a href="#handball" class="contentLink" data-ajax="false">H </a></li>
</ul>
</div>
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
<div data-role="page" class="pages" id="home">
<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>Canlı Skor</h1>
</div><!-- /header -->
<div data-role="content">
<div class="article">
<div>
<ul>
</ul>
</div>
</div><!-- /article -->
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h1>Fanatik Score</h1>
</div><!-- /footer -->
</div><!-- /page -->
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
<div data-role="page" class="pages" id="football">
<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>Futbol</h1>
</div><!-- /header -->
<div data-role="content">
<div class="article">
<div>
<ul id="live">
</ul>
</div>
</div><!-- /article -->
</div><!-- /content -->
<div data-role="footer" data-theme="c" data-position="fixed">
<div data-role="navbar">
<ul>
<li class="active"><a href="#football" data-ajax="false">live</a></li>
<li><a href="#overfootball" data-ajax="false">over</a></li>
<li><a href="#tablefootball" data-ajax="false">tables</a></li>
<li><a href="#fixturefootball" data-ajax="false">fixture</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
<div data-role="page" class="pages" id="overfootball">
<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>Futbol</h1>
</div><!-- /header -->
<div data-role="content">
<div class="article">
<div>
<ul id="over">
</ul>
</div>
</div><!-- /article -->
</div><!-- /content -->
<div data-role="footer" data-theme="c" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#football" data-ajax="false">live</a></li>
<li class="active"><a href="#overfootball" data-ajax="false">over</a></li>
<li><a href="#tablefootball" data-ajax="false">tables</a></li>
<li><a href="#fixturefootball" data-ajax="false">fixture</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>
</div><!-- /header -->
<div data-role="content">
<div class="article">
<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" data-ajax="false">live</a></li>
<li><a href="#overfootball" data-ajax="false">over</a></li>
<li class="active"><a href="#tablefootball" data-ajax="false">tables</a></li>
<li><a href="#fixturefootball" data-ajax="false">fixture</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->
<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>Futbol</h1>
</div><!-- /header -->
<div data-role="content">
<div class="article">
<h1>Fixturesssss</h1>
<div>
fixturerrrrr
</div>
</div><!-- /article -->
<div data-role="footer" data-theme="c" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#football" data-ajax="false">live</a></li>
<li><a href="#overfootball" data-ajax="false">over</a></li>
<li><a href="#tablefootball" data-ajax="false">tables</a></li>
<li class="active"><a href="#fixturefootball" data-ajax="false">fixture</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
我无法使用页脚导航导航到“fixturefootball”页面。
我错过了什么？
谢谢。
【问题讨论】：
-
我从链接中删除了 [ data-ajax="false" ]，但与此无关..请帮助..
-
你能把你的代码放在
jsfiddle.net吗？
标签： jquery cordova jquery-mobile jquery-mobile-navbar