在Jquery移动页面中，Anchor无法正常工作

Question

我读过How to get Anchor Links to work in Jquery Mobile?，但这不是我想要的。

我有以下页面，我有两个锚点用于此页面。

将文件位置+＃zhuaguirule复制到浏览器是很奇怪的，它没有按预期显示正确的部分。如果我再次在Firefox中输入ENTER，它会显示第二部分。

为什么？我也尝试将此页面部署到PROD env，移动浏览器也没有把我带到第二部分。我需要一个URL，将我带到第二部分。

这是我的JQuery mobile页面

<div data-role="page" id="rule">
    <div data-role="content" id="wodirule">  <!--this is one part-->
     <h2>GAME RULE 1</h2>
        <ul data-role="listview" data-inset="true">
            <li>....</li>
            <li>....</li>
        </ul>
     </div>  
     <br><br>    

    <div data-role="content" id="zhuaguirule"><!--this is the other part-->
    <h2>GAME RULE 2</h2> 
            <ul data-role="listview" data-inset="true">
                <li>....</li>
                <li>....</li>                   
            </ul>
            <ul data-role="listview" data-inset="true"> 
                <li>...</li>
                <li>...</li>
            </ul>

    </div>

   <div data-role="footer" data-position="fixed">
      <div data-role="navbar">
        <ul>
            <li><a href="PAGE1.html" data-icon="home">....</a></li>
            <li><a href="PAGE2.html" data-icon="home">....</a></li>
        </ul>
      </div>
   </div>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script
    src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>