Question

我正在使用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”页面。

我错过了什么？

感谢。

Answer 1

如果您将最后一页移到最后一页，可以修复它。

工作示例：.......删除.......

<!-------------------------------------------------------------------------------------------------------------------------------------------------------->

        <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 -->        
<!-------------------------------------------------------------------------------------------------------------------------------------------------------->

JQuery Mobile - 页脚导航不起作用

1 个答案: