Question

我有一个带有两个jquery移动页面的html（两个data-role ='page'）每个页面都有标题，内容和页脚。

但我发现当页面加载时，第二页的页脚跳出<div data-role='page'></div>

这是我的源代码：

<html>
<head>
   <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
    <link rel="stylesheet" href="stylesheets/style.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
    <script src="/javascripts/setCSStrick.js"></script>
    <script src="/javascripts/loadXMLpaper.js"></script>
    <script src="/javascripts/loadXMLauthor.js"></script>
    <title>P</title>
</head>
<body>

     <div id="paperListPage" data-role="page" data-add-back-btn="true">
          <div data-role="header" >

             <h1>Paper List</h1>
              <!--<a href="#" class="ui-btn-left" data-rel="back">Back</a>-->
            <a href="/" data-transition="fade" data-icon="home" class="ui-btn-right">Home</a>
          </div>
           <div data-role="content" class="ui-content" role="main">
                    <ul data-role="listview" id="list-paperList" class="ui-listview" data-autodividers="true" data-filter="true">

                    </ul>
           </div>
           <div data-role="footer" data-position="fixed"> 
             <div data-role="navbar">
                 <ul >
                    <li ><a href="#" class="ui-btn-active ui-state-persist">PaperList</a></li>
                    <li ><a href="#peoplePage">People</a></li>
                 </ul>
             </div><!-- /navbar -->
          </div> 
    </div>

     <div id="peoplePage" data-role="page" data-add-back-btn="true">
            <div data-role="header" >
               <h1>People</h1>
                <!--<a href="#" class="ui-btn-left" data-rel="back">Back</a>-->
                    <a href="/" data-transition="fade" data-icon="home" class="ui-btn-right">Home</a>
            </div>
              <div id="content" data-role="content"  class="ui-content" role="main">
                <ul data-role="listview" id="list-author" data-autodividers="true" data-filter="true">
                </ul>
              </div>
            <div data-role="footer" data-position="fixed"> 
               <div data-role="navbar">
                   <ul >
                      <li ><a href="#paperListPage">PaperList</a></li>
                      <li ><a href="#" class="ui-btn-active ui-state-persist">People</a></li>
                   </ul>
               </div><!-- /navbar -->
            </div> 
    </div>


    <!--<script type="text/javascript" src="phonegap.js"></script>-->
    <!--<script type="text/javascript" src="javascripts/index.js"></script>-->
</body>

以下是chrome dev工具源代码的截图：

enter image description here

Jquery Mobile页脚跳出<div data-role =“page”> </div>

0 个答案: