Question

我有一个场景，其中我尝试使用链接在我的Android应用程序页面中导航。我正在使用HTML5和Phonegap以及JQuery Mobile。

前者，我有：

<h3><a name="try"/> Header2 </h3>

当我给出时，

<a href="#try"> Navigate to Header2 </a>

为了导航到同一页面中的Header部分，我无法这样做。有人可以为这个问题提供一些解决方案..？

作为@Adleer提供的解决方案的一部分，尝试使用同一HTML文档的多个部分。以下是供参考的示例代码：

<body>
<div data-role="page" id="page3">
<div data-role="header">
<h3>Common diphthongs</h3></div></div>

<div data-role="page" id="diphthongs">
<div data-role="content">
<ul>
<li> Test </li>
<li> item2 </li>
</ul>
</div></div>

<div data-role="page" id="vowels">
<div data-role="content">
<ul>
<li><a href="#diphthongs"> Link to Diphthongs </a> </li>
<li><a href="#page3"> Link to page3 </a> </li> </li>
</ul>
</div></div>
</body>

上述代码仅供参考其中一个提供的解决方案。

Answer 1

您想引用ID，您可以使用段落，跨度或div。

<span id="try">Header2</span>

然后您可以按预期导航到它：

<a href="#try">Navigate to Header2</a>

另外，你的方式

<a name="try/> Header2

不正确，您的报价已关闭，并且您没有正确关闭该属性。

Answer 2

在你添加的最后一个jsfiddle中，你在选择器和HTML属性中有一些错误。您可以使用id attribue和唯一标识符，选择器$('#Anyname') - 区分大小写（大写字母/小写字母） - 来访问该元素的属性。

或者，使用带有unqiue标识符的name属性，使用选择器$('[name=Somename]') - 区分大小写（大写字母/小写字母） - 来访问该元素的属性。

要向下滚动到任何元素，jQuery Mobile都有自己的滚动功能.silentScroll()。请注意，与$.mobile.silentScroll()不同，.animate({ scrollTop: value }, animation-speed)没有动画。

<强> Demo

$('selector').on('click', function () {
  var position = $.mobile.activePage.find('#vowels2').get(0).offsetTop;
  $.mobile.silentScroll(position);
});

其中.get(0).offsetTop是目标元素的 y 轴位置值，$.mobile.activePage是活动/当前页面/视口。

Answer 3

您想引用ID，您可以使用段落，跨度或div。

<span id="try">Header2</span>

然后您可以按预期导航到它：

<a href=" #try" data-ajax="false">Navigate to Header2</a>

当您设置data-ajax false时，它有效:) 刚试过......

如何使用HTML5，JQuery mobile中的链接在同一页面内部导航..？

3 个答案: