jQuery Mobile的导航栏图标出现两次

在我的jQuery Mobile的的NavBar的图标出现了两次，不明白为什么，从jQuery的文档jQuery Mobile的导航栏图标出现两次

<link rel="stylesheet" 
     href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

和导航栏本身

<div data-role="navbar" class="ui-navbar" role="navigation"> 
    <ul class="ui-grid-b"> 
    <li class="ui-block-a"> 
     <a id="showlatest" data-icon="grid" data-theme="a" 
     class="ui-btn-active ui-btn-icon-top ui-btn-up-a"> 
     <span class="ui-btn-inner" aria-hidden="true"> 
      <span class="ui-btn-text">Latest</span> 
      <span class="ui-icon ui-icon-grid ui-icon-shadow"></span> 
     </span> 
     </a> 
    </li> 
    <li class="ui-block-b"> 
     <a id="showstages" data-icon="star" 
     class="ui-btn ui-btn ui-btn-up-a ui-btn-icon-top" data-theme="a"> 
     <span class="ui-btn-inner" aria-hidden="true"> 
      <span class="ui-btn-text">Top</span> 
      <span class="ui-icon ui-icon-star ui-icon-shadow"></span> 
     </span> 
     </a> 
    </li> 
    <li class="ui-block-c"> 
     <a id="showclass" data-icon="gear" data-theme="a" 
     class="ui-btn ui-btn-up-a ui-btn-icon-top"> 
     <span class="ui-btn-inner" aria-hidden="true"> 
      <span class="ui-btn-text">Other</span> 
      <span class="ui-icon ui-icon-gear ui-icon-shadow"></span> 
     </span> 
     </a> 
    </li> 
    </ul> 
</div>

输出复制的代码如下图所示： http://tinypic.com/r/1fcppz/5

有关为什么会发生这种情况的建议？

来源

2013-05-02 user2343254

如果您的问题已解决，请将任何一个标记为答案。谢谢。 – clu3Less 2013-05-02 13:56:17

您不必明确指定跨度标签。它们是由jQuery插件本身为您生成的。尝试用此代码替换。

<div data-role="navbar" class="ui-navbar" role="navigation"> 
    <ul class="ui-grid-b"> 
    <li class="ui-block-a"> 
     <a id="showlatest" data-icon="grid" data-theme="a" 
     class="ui-btn-active ui-btn-icon-top ui-btn-up-a">Latest</a> 
    </li> 
    <li class="ui-block-b"> 
     <a id="showstages" data-icon="star" 
     class="ui-btn ui-btn ui-btn-up-a ui-btn-icon-top" data-theme="a">Top</a> 
    </li> 
    <li class="ui-block-c"> 
     <a id="showclass" data-icon="gear" data-theme="a" 
     class="ui-btn ui-btn-up-a ui-btn-icon-top">Other</a> 
    </li> 
    </ul> 
</div>

来源

2013-05-02 13:38:49 clu3Less

已选择，谢谢！ – user2343254 2013-05-02 14:29:57

在你的代码删除这个多余的跨度，似乎大功告成：

<span class="ui-icon ui-icon-star ui-icon-shadow"></span>

Fiddle

来源

2013-05-02 13:26:23 Eli

jQuery Mobile的导航栏图标出现两次

回答

相关问题