JQuery Mobile - 頁腳導航不起作用

我在PhoneGap項目上。我使用jQuery的移動框架。JQuery Mobile - 頁腳導航不起作用

我在這裏有一些關於導航的問題。

我有一個主頁，它首先進入屏幕。當我從我的面板中選擇一個子菜單（我沒有使用jqm面板，創建自己）後，會出現另一個頁面，並且此頁面在其自己的頁腳上有導航。我點擊頁腳導航，它很好用，但是，當我點擊我的第4個按鈕時，它不會導航到相關頁面。

以下是示例代碼。

<!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」頁面。

我失蹤了什麼？

謝謝。

來源

2013-05-02 Kuthay Gümüş

我刪除了鏈接[數據阿賈克斯=「假」]，但它不是它..幫助請.. – 2013-05-02 08:11:47

你可以把你的代碼放在'jsfiddle.net'嗎？ – Ouadie 2013-05-02 08:20:10

如果您將最後一頁移動到最後一頁旁邊，則可以解決該問題。

工作例如：.......刪除.......

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

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

來源

2013-05-02 08:49:17 Gajotres

感謝您的回答，它的作品非常棒。 – 2013-05-02 08:54:38

JQuery Mobile - 頁腳導航不起作用

回答

相關問題