jquery导航栏上两个菜单链接之间的差异

时间:2013-03-01 04:37:53

标签: jquery jquery-ui jquery-mobile

我正在尝试使用jquery mobile创建一个简单的导航栏,但它似乎在桌面上看起来很奇怪。

http://imgur.com/7BIgUQx

当我跳转到起始页面“./overview”时,整个菜单会变得更大并且有一条奇怪的线条会抛出它。如果我单击第二个菜单项,菜单会变小并且看起来正确。我去看看我是否可以在firefox中重现它,并注意到它不是概述页面的唯一。如果我在域后键入“./stats”,它将进入统计页面,菜单将再次以不同方式呈现。返回概述页面,菜单看起来很正常。所以似乎正在发生的事情是菜单看起来只在我在网址栏中输入的页面上显示错误。如果我切换到另一个页面,该栏中的网址会更新,但看起来不错。通过菜单切换回来,菜单再次变大,该线路将其抛出。

我查看了两个页面的来源,它们看起来完全相同,所以我不知道还有什么要检查。

概述

<html>
  <header>
    <title>Overview</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
  </header>
  <body>
    <h1>Overview</h1>
    <h3></h3>

    <div data-role="header" data-id="foo1" data-position="fixed">
      <div data-role="navbar">
    <ul>
      <li><a href="/10/overview" class="ui-btn-active ui-state-persist">Overview</a></li>
      <li><a href="/10/stats">Status</a></li>
    </ul>
      </div><!-- /navbar -->
    </div><!-- /footer -->
  </body>
</html>

统计

<html>
  <header>
    <title>Stats</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
  </header>
  <body>
    <h1>Stats</h1>
    <h3></h3>

    <div data-role="header" data-id="foo1" data-position="fixed">
      <div data-role="navbar">
    <ul>
      <li><a href="/10/overview">Overview</a></li>
      <li><a href="/10/stats" class="ui-btn-active ui-state-persist">Stats</a></li>
    </ul>
      </div>
    </div>
  </body>
</html>

有谁知道导致此菜单放大的原因是什么?

1 个答案:

答案 0 :(得分:1)

在两个页面中的head标记之间包含以下标记:

<title>Stats</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>