0

我正在使用新的引导程序和 jQuery。我试图找出用手势在页面之间导航的最佳方式。

我最初是location.replace在注册一个手势后着火的。然后我在这里找到了 Ajax 方法，它有 div 和 div 之间的链接，就好像它们是页面一样：

<div data-role="page" id="foo">

但是，当我使用 Bootstrap 运行它时，按钮点击正常，但加载一个空白页面，即使 URL 反映了正确的域mydomain.com/page#foo。如果我重新加载，它会加载“第二页”。

我知道我可以用不同的方式来做这件事，但是a）我是用ajax链接做最好的方式吗，b）为什么它不起作用？我应该只使用方法一并将转换添加到页面加载吗？

该应用程序的背景是一个完全移动的网络应用程序。

<head>
<link href="css/bootstrap.css" rel="stylesheet">
</head>

<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/">Meteor Prototype</a>
    <div class="nav-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/">Home</a></li>
        <li><a href="map-page.php">Map Page</a></li>
        <li><a href="exhibit-list-page.php">Exhibit List Page</a></li>
        <li><a href="exhibit-page.php">Exhibit Page</a></li>
        <li><a href="top-level-museum.php">Top Level Museum</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

<div class="container">

<!-- Start of first page -->
<div data-role="page" id="foo">

<div data-role="header">
    <h1>Foo</h1>
</div><!-- /header -->

<div data-role="content">
    <p>I'm first in the source order so I'm shown as the page.</p>
    <p>View internal page called <a href="#bar">bar</a></p>
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">

<div data-role="header">
    <h1>Bar</h1>
</div><!-- /header -->

<div data-role="content">
    <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
    <p><a data-transition="flip" data-inline="true" href="#foo">Back to foo</a></p>
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->

   <script src="js/jquery.js"></script>
   <script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
4

0 回答 0