1

我使用 jquery mobile 1.3.1 制作了一个移动网站。问题是,当我尝试从首页查看菜单进入时,我在 URL 中得到 /#,如 tironci.dyndns.org/freddys/#/menu.html 。我不知道是什么原因造成的。当我从 menu.html 返回 index.html 时,a # 被添加到 url。在桌面上你看不到 /# 但在 ipad 上你可以看到它。如果页面刷新,则菜单按钮将起作用。

索引.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>Freddy's Place</title>
<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>
<link href="styles/custom.css" rel="stylesheet" type="text/css">
<link href="styles/f.css" rel="stylesheet" type="text/css">
</head>
<body>
<div data-role="page" id="page" data-theme="f">
<div  id="page2">
    <div data-role="content">
        <a data-role="button" data-transition="pop" data-theme="f" href="menu.html">
            View Our Menu
        </a>
    </div>
</div>
</div>
</body>
</html>

菜单.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>Freddy's Place</title>
<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 type="text/javascript">
$(document).bind("mobileinit", function() { 
  $.mobile.page.prototype.options.addBackBtn = true; 
}); 
</script>
<script type="text/javascript">
var currentYear = (new Date).getFullYear();
$(document).ready(function() {
  $(".year").text( (new Date).getFullYear() );
});
</script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link href="styles/custom.css" rel="stylesheet" type="text/css">
<link href="styles/f.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div data-role="page" id="page" data-theme="f">
    <div data-role="header" data-theme="f" data-backbtn="false">
      <h1>Freddy's Place <br>Breakfast and Lunch</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview" data-theme="f" data-inset="true">
        <li><a href="#page2">Eggs</a></li>
        <li><a href="#page3">Pancakes / French Toast</a></li>
        <li><a href="#page4">Omelettes</a></li>
        <li><a href="#page5">Salads</a></li>
        <li><a href="#page6">Muffins and Bagels</a></li>
        <li><a href="#page7">Plates</a></li>
        <li><a href="#page8">Cereals / Oatmeal</a></li>
        <li><a href="#page9">Sandwiches / Clubs</a></li>
        <li><a href="#page10">Grilled Sandwiches</a></li>
        <li><a href="#page11">Open Face Sandwiches</a></li>
        <li><a href="#page12">Salad Rolls</a></li>
        <li><a href="#page13">Pasta</a></li>
        <li><a href="#page14">Soups</a></li>
        <li><a href="#page15">Side Orders</a></li>

      </ul>
    </div>
    <div data-role="footer" data-theme="f">
      <h4>Freddy's Place &copy; <span class="year"></span></h4>
    </div>
  </div>
  <div data-role="page" id="page2" data-theme="f">
    <div data-role="header" data-theme="f"> <a href="#page" data-role="button" data-icon="back" data-rel="home">Home</a>
      <h1>Eggs</h1>
    </div>
    <div data-role="content">


      <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
        <li>One Egg, any style  <span class="price">$3.75</span></li>                   
        <li>One Egg, any style <br> w/ Bacon, Ham or Sausage <span class="price">$4.50</span></li>
        <li>Two Eggs, any style <span class="price">$4.50</span></li>
        <li>Two Eggs, any style <br> w/ Bacon, Ham or Sausage <span class="price">$4.95</span></li>
        <li>Two Eggs, any style <br> w/ Sirloin Tips <span class="price">$7.75</span></li>
        <li>Two Eggs, any style <br> w/ Corned Beef Hash <span class="price">$6.95</span></li>
        <li >Hungry Man Special <span class="price">$7.50</span>       
          <p class="hungry">Three Eggs (any style) w/ Two Bacon, <br>Two Sausages, Two Pancakes, Coffee <br> No Splits, No Substitutions</p>
        </li>
      </ul>

    </div>
    <div data-role="footer" data-theme="f">
      <h4>Freddy's Place &copy; <span class="year"></span></h4>
    </div>
  </div>
</div>

</body>
</html>
4

2 回答 2

3

简短的回答:jQuery mobile 导致了这种情况,并且没有真正的解决方法。

长答案:jQuery mobile,为了支持链接上的页面转换(幻灯片,淡入/淡出),将您的每一个链接转换为基于标签的参考(如果您的网站开始于dir/page.html并且您正在尝试获取dir/my/new.html,真正的链接将是dir/page.html#/my/new.html。这是一个功能,而不是一个错误。有问题的功能是能够通过标签而不是整页为特定页面添加书签。除非脚本的其他部分window.location.hash用于任何用途,否则没有理由禁用它。

据我所知,没有办法禁用它(你也不应该想要,过渡几乎是使用 jQuery mobile 的第二个原因,第一是触摸事件合成)。

于 2013-05-24T20:10:42.547 回答
1

在我的情况下,答案是添加rel="external"<a>标签中。

于 2013-05-24T23:13:46.020 回答