jQuery mobile persistant navbar transition issue

Question

I'm using jQuery Mobile 1.4.2 to finish a simple demo, and my code is like this:

<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-id="common_footer">
    <div data-role="navbar">
        <ul>
            <li><a href="#order_manage" data-icon="gear" class="ui-btn-active ui-state-persist">订单管理</a></li>
            <li><a href="#rate_manage" data-icon="gear">评价管理</a></li>
            <li><a href="#logistic_manage" data-icon="gear">物流动态</a></li>
            <li><a href="#help_manage" data-icon="gear">帮助</a></li>
        </ul>
    </div>
</div>

But every time I tap the navbar, it'll lose the background and become transparent during the transition

What should I do ? [this doc said it would work perfactly][4]

I meant to add several images, but my reputation is not qualified

Please ignore those Chinese characters.

Answer 1

Because persistent headers/footers are defined outside the page, they do not automatically inherit the data-theme of the page. Therefore you just need to include the data theme in the markup:

<div data-theme="a" data-role="footer" data-position="fixed" data-tap-toggle="false" data-id="common_footer" >

Working DEMO