JQuery Mobile Tab Bar Causing Rendering Problems

问题

I have a JQuery Mobile Tab Bar that is not behaving as expected:

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

When the tab bar initially loads, it looks normal, however, when navigating to "more" or "map", then the buttons no longer show an active state. Also, after navigating through pages, sometimes, the first "landmarks" page appears below the active page, if the user scrolls down.

Here is a link to the complete project: http://jakeserver.com/Apps/BostonLandmarks/B10/index.html

Is there something wrong with my tab bar?

Thanks.

来源：https://stackoverflow.com/questions/24247817/jquery-mobile-tab-bar-causing-rendering-problems

标签

javascript