JQuery移动显示空白

JQuery Mobile Showing Blank

本文关键字：空白 显示 移动 JQuery      更新时间：2023-09-26

我正在构建一个JQuery移动web应用程序，我遇到了一个有趣的问题。我有一个列表视图，当我点击其中一个菜单行时，页面2按预期加载。但是，当我点击后退按钮时，第1页加载半秒，然后第2页返回(没有过渡)。

下面是这两个页面的代码: 
<section id="more" data-role="page">
    <header data-role="header" data-position="fixed" class="AppHeader">
        <h1>More</h1>
    </header>
    <div data-role="content">
        <ul data-role="listview" data-filter="false" id="moreList">
            <li><a href="#historyOfLandmarks" data-transition="slide"><h1>History of Boston Landmarks</h1></a></li>
        </ul>
    </div>
</section>
<section id="historyOfLandmarks" data-role="page">
    <header data-role="header" data-position="fixed" class="AppHeader">
        <a href="#more" data-transition="slide" data-direction="reverse" data-icon="arrow-l" data-rel="back">Back</a>
        <h1>History of Boston Landmarks</h1>
    </header>
    <div data-role="content">
        <p>This is a list of National Historic Landmarks in Boston, Massachusetts.</p>
    </div>
</section>

JS Fiddle不能说明问题:http://jsfiddle.net/jakechasan/66vbS/

在其他地方，问题出现:http://jakeserver.com/Apps/BostonLandmarks/B5/landmarks.html

我不明白为什么JSFiddle没有说明这个问题，但是，我的计算机/服务器上的相同文件有这个问题?

任何想法?

谢谢。

你自己的CSS应该为这个问题负责。

编辑此文件:http://jakeserver.com/Apps/BostonLandmarks/B5/css/styles.css

并从底部移除:

.ui-page{
    display: block !important;
}

我已经测试成功了

相关文章：