Question

所以我在jquery mobile中使用navbar实现了滑动页面的代码。当我自己运行时，它起作用了。但当我用一个按钮（不同的文件）将它附加到我的“index.html”时，它会移动到下一页（包含3个图标），当我点击图标时，它不会移动，只显示错误通知。

我没有使用任何javascript，只引用了通常的jquery移动库。所以我假设我必须要用“index.html”来收集它。但是什么以及如何？

<!-- STATE PAGE 1 -->
    <div data-role="page" id="page1">
    <div data-role="header" data-id="header" data-backbtn="false" align="center" data-position="fixed">
     <p><img src="pics/ico-vmap3-white.png" id="map-header"/></p>
     <div data-role="navbar" data-iconpos="bottom">
      <ul>
       <li><a href="#" data-theme="" data-icon="home" class="ui-btn-active ui-state-persist">Home</a></li>
       <li><a href="#page2" data-theme="" data-icon="star">V-Map</a></li>
       <li><a href="#page3" data-theme="" data-icon="check">Login</a></li>
      </ul>
     </div>
    </div>
    <div data-role="content" align="center" style="margin:2em 1em 2em 1em;">
     <img src="pics/ico-mapping2.png" width="100%" height="100%"/>
    </div>
    <div data-role="footer" id="footer" data-position="fixed">
     <p>&copy; hikmahaz</p>
    </div>
    </div>
    <!-- END STATE PAGE 1-->

    <!-- STATE PAGE 2 -->
   <div data-role="page" id="page2">
    <div data-role="header" data-id="header1" data-backbtn="false" align="center">
     <p><img src="pics/ico-vmap3-white.png" id="map-header"/></p>
     <div data-role="navbar" data-iconpos="bottom">
      <ul>
       <li><a href="#page1" data-theme="" data-icon="home">Home</a></li>
       <li><a href="#" data-theme="" data-icon="star" class="ui-btn-active ui-state-persist">V-Map</a></li>
       <li><a href="#page3" data-theme="" data-icon="check">Login</a></li>
      </ul>
     </div>
    </div>
    <div data-role="content" align="center" style="margin:2em 1em 2em 1em;">
     <div data-role="fieldcontain">
      <p id="vteks"><strong>V-MAP</strong> is an Android based application that focused on mapping voters' political party, and this version will show you voters' map in East Java.</p>
     </div>
    </div>
    <div data-role="footer" id="footer" data-position="fixed">
     <p>&copy; hikmahaz</p>
    </div>
    </div>
    <!-- END STATE PAGE 2-->

    <!-- STATE PAGE 3 -->
   <div data-role="page" id="page3">
    <div data-role="header" data-id="header2" data-backbtn="false" align="center">
     <p><img src="pics/ico-vmap3-white.png" id="map-header"/></p>
     <div data-role="navbar" data-iconpos="bottom">
      <ul>
       <li><a href="#page1" data-theme="" data-icon="home">Home</a></li>
       <li><a href="#page2" data-theme="" data-icon="star">V-Map</a></li>
       <li><a href="#" data-theme="" data-icon="check" class="ui-btn-active ui-state-persist">Login</a></li>
      </ul>
     </div>
    </div>
    <div data-role="content" align="center" style="margin:2em 1em 2em 1em;">
     <div data-role="fieldcontain">
      <form>
      </form>
     </div>
    </div>
    <div data-role="footer" id="footer" data-position="fixed">
     <p>&copy; hikmahaz</p>
    </div>
    </div>
    <!-- END STATE PAGE 3-->

将导航栏页面与索引相结合

0 个答案: