Question

我想使用jQuery Mobile创建一个带标签的移动页面。我已经掌握了创建选项卡的基础知识（例如Tab1，Tab2，Tab3，Tab4），并让每个选项卡加载新的内容页面。 如何在特定标签中使用锚点？因此，例如，如果有人想要将链接带入Tab4 Anchor1的链接。

我是JavaScript和jQuery的新手。

以下代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css">
<!-- JavaScript HTML requirements -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
</head>

<body>
<div data-role="page" data-theme="d" id="home" data-id="nav">
  <header data-role="header" >
    <h1>TEST</h1>
    <div data-role="navbar" data-id="nav">
      <ul>
        <li><a href="#home" data-icon="home" data-theme="d" class="ui-btn-active ui-state-persist" >Home</a></li>
        <li><a href="#speakers" data-icon="star" data-theme="d">Speakers</a></li>
        <li><a href="#" data-icon="grid" data-theme="d">News</a></li>
      </ul>
    </div>
  </header>
  <section data-role="content"> Home </section>
  <footer data-role="footer" class="ui-bar"> <a href="" data-icon="gear" class="ui-btn-right">Buy Tickets</a> </footer>
</div>
<div data-role="page" data-theme="d" id="speakers">
  <header data-role="header" data-id="nav" >
    <h1>TEST</h1>
    <div data-role="navbar" >
      <ul>
        <li><a href="#home" data-icon="home" data-theme="d">Home</a></li>
        <li><a href="#speakers" data-icon="star" data-theme="d"
        class="ui-btn-active ui-state-persist">Speakers</a></li>
        <li><a href="#" data-icon="grid" data-theme="d">News</a></li>
      </ul>
    </div>
  </header>
  <section data-role="content">The name attribute specifies the name of an anchor.

The name <a href="#jib">attribute</a> is used to create a bookmark inside an HTML document.

Note: The upcoming HTML5 standard suggests using the id attribute instead of the name attribute for specifying the name of an anchor. Using the id attribute actually works also for HTML4 in all modern browsers.

Bookmarks are not displayed in any special way. They are invisible to the reader. <a name="jib"></a> Speakers </section>
  <footer data-role="footer" class="ui-bar"> <a href="" data-icon="gear" class="ui-btn-right">Buy Tickets</a> </footer>
</div>
</body>
</html>

Answer 1

我想我理解，但如果我误解你的问题，请随时发表评论。

我相信你误解了内部JQuery链接是如何工作的。首先要看一下JQuery Mobile页面解剖，特别是在你的情况下的“多页面模板结构”： http://jquerymobile.com/test/docs/pages/page-anatomy.html

基本上，页面中间的每个“嵌入页面”部分都需要是标有data-role="page"标记的独立div。它的ID将成为你的锚点。

因此，为了使您的内部<a href="#jib">能够正常工作，您必须拥有ID =“jib”的内置div

评论后更新的答案

您正在寻找的是$.mobile.silentScroll。您想获得锚链接的Y位置，然后让页面滚动到它。虽然有点小问题。由于在页面转换时发生的JQuery Mobile动画，您需要在滚动发生之前添加一点暂停。

function loadJib()
{
  $.mobile.changePage('#jib',{transition:"slide"});

  var yPos = $('#mylink').get(0).offsetTop;

  setTimeout(function(){
    $.mobile.silentScroll(yPos);
  },800);

看看我是如何做到的（延迟时间为.8秒）。：

http://jsbin.com/ahevav/3/edit

jQuery移动选项卡和锚点

1 个答案: