JQuery Mobile Navbar选项卡 - 更改选项卡时闪烁

时间:2013-09-09 07:10:15

标签: jquery mobile cordova navbar jquery-mobile-navbar

页脚标签效果很好,页脚更改没有闪烁,但单击标签时标题会一直闪烁。我怎么能阻止眨眼?

我尝试了一些我在网上找到的解决方案,这些解决方案帮助了其他人,但对我不起作用,我一定是做错了。

下面是我的HTML。提前谢谢!

编辑:我想出来了..我需要datatransition =“none”

<a href="#Page2" data-role="tab" data-transition="none" >

现在可行了

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>NavBar Test</title>
        <link rel="stylesheet" href="themes/mytheme.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <script src="phonegap.js"></script>

    </head>
    <body>
<!--                            Page 1                             -->

<div data-role="page" id="Page1" >
    <div data-role="header" >
        <h1>Navbar Test</h1>
    </div>

    <div data-role="content" data-theme="a">
           <h2>Here is the first tab</h2>
    </div>

    <div data-role="footer" data-id="foo1" data-position="fixed" >
        <div data-role="navbar">
        <ul>
            <li><a href="#Page1" data-role="tab" class="ui-btn-active ui-state-persist">Info</a></li>
            <li><a href="#Page2" data-role="tab">Friends</a></li>
            <li><a href="#Page3" data-role="tab">Albums</a></li>
        </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div><!-- /page-->
<!--                        End Page 1                             -->

<!--                            Page 2                             -->
<div data-role="page" id="Page2" >
    <div data-role="header" >
        <h1>Navbar Test</h1>
    </div>

    <div data-role="content" data-theme="a">
           <h2>Here is the second tab</h2>
    </div>

    <div data-role="footer" data-id="foo1" data-position="fixed" >
        <div data-role="navbar">
        <ul>
            <li><a href="#Page1" data-role="tab">Info</a></li>
            <li><a href="#Page2" data-role="tab" class="ui-btn-active ui-state-persist">Friends</a></li>
            <li><a href="#Page3" data-role="tab">Albums</a></li>
        </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div><!-- /page-->
<!--                        End Page 2                             -->

<!--                            Page 3                             -->
<div data-role="page" id="Page3" >
    <div data-role="header">
        <h1>Navbar Test</h1>
    </div>

    <div data-role="content" data-theme="a">
           <h2>Here is the third tab</h2>
    </div>

    <div data-role="footer" data-id="foo1" data-position="fixed" >
        <div data-role="navbar">
        <ul>
            <li><a href="#Page1" data-role="tab">Info</a></li>
            <li><a href="#Page2" data-role="tab">Friends</a></li>
            <li><a href="#Page3" data-role="tab" class="ui-btn-active ui-state-persist">Albums</a></li>
        </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div><!-- /page-->
<!--                        End Page 3                             -->

    </body>
</html>

0 个答案:

没有答案