jquery mobile navbar添加未知按鈕

我有超過2個小時的搜索這個問題，我不明白爲什麼這麼簡單的東西不起作用。jquery mobile navbar添加未知按鈕

我嘗試在我的頁腳來實現導航欄，但我不知道爲什麼jQuery的添加一些按鈕和佈局變得可怕。

這是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <title>VeryGoodTrip</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
</head> 
<body> 
    <div data-role="page"> 
     <div data-role="header"> 
      <h1>Destinations</h1> 
     </div><!-- /header --> 

     <div data-role="content" data-theme="c"> 
      <ul data-role="listview"> 
       <li><a href="index.html"> 
        <img src="img/corse.png" /> 
        <h3>Corse</h3> 
        <p>Corse</p> 

       </a></li> 
       <li><a href="index.html"> 
        <img src="img/golf.png" /> 
        <h3>Golf du Lyon</h3> 
        <p>Golf du Lyon</p> 
       </a></li> 
       <li><a href="index.html"> 
        <img src="img/lerins.png" /> 

        <h3>Iles de lerins</h3> 
        <p>Iles de lerins</p> 
       </a></li> 
       <li><a href="index.html"> 
        <img src="img/menton.png" /> 
        <h3>Menton</h3> 
        <p>Menton</p> 

       </a></li> 
       <li><a href="index.html"> 
        <img src="img/monaco.png" /> 
        <h3>Monaco</h3> 
        <p>Monaco</p> 
       </a></li> 
       <li><a href="index.html"> 
        <img src="img/nice.png" />  
        <h3>Nice</h3> 
        <p>Nice</p> 
       </a></li> 
       <li><a href="index.html"> 
        <img src="img/tropez.png" /> 
        <h3>Saint-Tropez</h3> 
        <p>Saint-Tropez</p> 
       </li> 
      </ul> 
     </div><!-- /content --> 

     <div data-role="footer" data-position="fixed">  
      <div data-role="navbar" data-iconpos="right"> 
       <ul> 
        <li><a href="index.html" data-icon="refresh" class="ui-state-persist ui-btn-active">Destinations</a></li> 
        <li><a href="index.html" data-icon="refresh">Activités</a></li> 
        <li><a href="index.html" data-icon="refresh">Planning</a></li> 
       </ul> 
      </div><!-- /navbar --> 
     </div><!-- /footer --> 

    </div><!-- /page --> 
</body>

而這就是我與螢火蟲：

<div data-position="fixed" data-role="footer" class="ui-footer ui-bar-a ui-footer-fixed fade ui-fixed-overlay" role="contentinfo" style="top: -155px;"> 
    <a href="index.html" class="ui-btn-left ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow" data-theme="a"> 
     <span class="ui-btn-inner ui-btn-corner-all"> 
      <span class="ui-btn-text"></span> 
     </span> 
    </a> 
    <div data-iconpos="right" data-role="navbar" class="ui-navbar" role="navigation"> 
     **<a href="index.html" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-right"> 
      <span class="ui-btn-inner"> 
       <span class="ui-btn-text"></span> 
      </span> 
     </a>** 
     <ul class="ui-grid-c"> 
      <a href="index.html" class="ui-block-a ui-btn ui-btn-icon-right ui-btn-up-a" data-theme="a"> 
       <span class="ui-btn-inner"> 
        <span class="ui-btn-text"></span> 
       </span> 
      </a> 
      <li class="ui-block-b"> 
       <a href="index.html" data-theme="a" class="ui-btn ui-btn-icon-right ui-btn-up-a"> 
        <span class="ui-btn-inner"> 
         <span class="ui-btn-text"></span> 
        </span> 
       </a> 
       <a class="ui-state-persist ui-btn-active ui-btn ui-btn-icon-right ui-btn-up-a" data-icon="refresh" href="index.html" data-theme="a"> 
        <span class="ui-btn-inner"> 
         <span class="ui-btn-text">Destinations</span> 
         <span class="ui-icon ui-icon-refresh ui-icon-shadow"></span> 
        </span> 
       </a> 
      </li> 
      <li class="ui-block-c"> 
       <a data-icon="refresh" href="index.html" data-theme="a" class="ui-btn ui-btn-icon-right ui-btn-up-a"> 
        <span class="ui-btn-inner"> 
         <span class="ui-btn-text">Activit?s</span> 
         <span class="ui-icon ui-icon-refresh ui-icon-shadow"></span> 
        </span> 
       </a> 
      </li> 
      <li class="ui-block-d"> 
       <a data-icon="refresh" href="index.html" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-right"> 
        <span class="ui-btn-inner"> 
         <span class="ui-btn-text">Planning</span> 
         <span class="ui-icon ui-icon-refresh ui-icon-shadow"></span> 
        </span> 
       </a> 
      </li> 
     </ul> 
    </div><!-- /navbar --> 
</div>

正如你可以看到下面兩個按鈕應該不會在這裏的任何想法？

<a href="index.html" class="ui-btn-left ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow" data-theme="a"> 
<span class="ui-btn-inner ui-btn-corner-all"> 
<span class="ui-btn-text"></span> 
</span> 
</a> 

<a href="index.html" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-right"> 
<span class="ui-btn-inner"> 
    <span class="ui-btn-text"></span> 
</span> 
</a>

感謝

來源

2012-02-24 Chido42

你忘了關閉<a>標籤使HTML元素沒有正確嵌套。這個問題是在data-role="content DIV最後一個列表項：

  <li> 
       <a href="index.html"> 
        <img src="img/tropez.png" /> 
        <h3>Saint-Tropez</h3> 
        <p>Saint-Tropez</p> 
      </li>

應該是：

  <li> 
       <a href="index.html"> 
        <img src="img/tropez.png" /> 
        <h3>Saint-Tropez</h3> 
        <p>Saint-Tropez</p> 
       </a> 
      </li>

這裏是上述修復的演示：http://jsfiddle.net/9q6My/（我加入的下一個註釋關閉</a>標籤我加了）

正如你從我上面格式化的代碼中可以看到的那樣，我確保縮進每個嵌套標籤，這樣我就可以看到每個標籤都被正確關閉了。

來源

2012-02-24 00:38:46 Jasper

非常感謝...我非常確定檢查了這一點。它解決了我的問題。 – Chido42 2012-02-24 00:40:23

@ Chido42不客氣。如果您發現答案有幫助，您可以讚賞Up-Vote，或者如果您發現這是正確的答案，將不勝感激。 – Jasper 2012-02-24 00:46:01

jquery mobile navbar添加未知按鈕

回答

相關問題