Question

我使用jquery mobile 1.3.1创建了一个移动网站。问题是，当我尝试从首页查看菜单时，我在URL中获取/＃，如tironci.dyndns.org/freddys/#/menu.html。我不知道造成这种情况的原因。当我从menu.html返回index.html时，会将＃添加到网址中。在桌面上你无法看到/＃但在ipad上你可以看到它。如果页面刷新，则菜单按钮工作。

的index.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>

menu.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>

Answer 1

简短回答：jQuery mobile正在引发这种情况，并且没有真正的方法。

长答案：jQuery mobile，为了支持链接上的页面转换（幻灯片，淡入/淡出），将每个链接转换为基于主题标签的引用（如果您的网站以dir/page.html开头并且你试图获得dir/my/new.html，它的真实链接将是dir/page.html#/my/new.html。这是一个功能，而不是一个错误。有问题的功能是能够通过主题标签而不是标记特定页面。除非您的脚本的其他部分用于window.location.hash任何内容，否则没有理由禁用它。

据我所知，没有办法禁用它（也不是你想要的，转换几乎是使用jQuery mobile的第二个原因，第一个是触摸事件合成）。

Answer 2

我的情况回答是将rel="external"添加到<a>代码。

/＃已添加到网站网址

2 个答案: