我使用 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 © <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 © <span class="year"></span></h4>
</div>
</div>
</div>
</body>
</html>