jQuery Mobile的标签和锚(jQuery mobile Tabs and Anchors)

我想创建一个使用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>

我想我明白，但随意评论，如果我误解你的问题。

我相信你误解如何内部链接的JQuery作品。第一件事情就是看看在jQuery Mobile的页面解剖学，尤其是在你的情况下，“多页面模板结构”： http://jquerymobile.com/test/docs/pages/page-anatomy.html

基本上每个“嵌入在页面中间的”你的页面的部分将需要一个独立的事业部标有data-role="page"标签。它的ID将是什么，你会指向一个锚。

因此，为了使您的内部<a href="#jib">工作，你必须有一个内置了ID =“臂”的div

修订ANSWER后的注解

什么你要找的是$.mobile.silentScroll 。你希望得到您的锚链接的Y位置，然后在页面滚动到它。有一个小的疑难杂症虽然。你需要在滚动发生，因为在页面过渡中发生的jQuery Mobile的动画前加少许停顿。

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

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

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

看看我是如何做到的（0.8秒的延迟）：

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