我想使用 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 http://jquerymobile.com/test/docs/pages/page-anatomy.html
基本上，页面的每个“嵌入页面中间”部分都需要是一个独立的 div，并标有data-role="page"标签。它的 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);
看看我是如何做到的（延迟 0.8 秒）：
http://jsbin.com/ahevav/3/edit http://jsbin.com/ahevav/3/edit
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
