jQuery移動選項卡和錨點

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 個解決方案

解決方案1
2 已采納 2012-08-29 16:53:13

jQuery移動選項卡和錨點

問題描述

1 個解決方案

解決方案1 2 已采納 2012-08-29 16:53:13

解決方案1
2 已采納 2012-08-29 16:53:13