JQuery Mobile标签栏导致渲染问题

Question

我有一个不按预期运行的JQuery Mobile标签栏：

<footer data-role="footer" data-theme="a" data-position="fixed" data-tap-toggle="false">
      <nav data-role="navbar">
           <ul>
                <li><a href="#landmarks" id="LandmarksTab" data-icon="custom" class="ui-btn-active">Landmarks</a></li>
                <li><a href="#map" id="MapTab" data-icon="custom">Map</a></li>
                <li><a href="#more" id="MoreTab" data-icon="custom">More</a></li>
           </ul>
      </nav>
</footer>

当标签栏最初加载时，它看起来正常，但是，当导航到“更多”或“地图”时，按钮不再显示active状态。此外，在浏览页面后，如果用户向下滚动，有时会在活动页面下方显示第一个“地标”页面。

以下是整个项目的链接：http://jakeserver.com/Apps/BostonLandmarks/B10/index.html

我的标签栏有问题吗？

感谢。