如何使用 HTML5、JQuery mobile 中的链接在同一页面内进行内部导航？答案

【问题标题】：How to navigate internally within same Page using links in HTML5, JQuery mobile..?如何使用 HTML5、JQuery mobile 中的链接在同一页面内进行内部导航？
【发布时间】：2013-08-20 15:24:48
【问题描述】：

我有一个场景，我正在尝试使用链接在我的 Android 应用程序的页面内导航。我将HTML5 与Phonegap 和JQuery Mobile 一起使用。

例如，我有：

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

当我付出时，

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

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

作为@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>

以上代码仅供参考提供的解决方案之一。

【问题讨论】：

你应该使用 div 和 data-role=page 在内部导航。
@omar，谢谢！！试图在这条线上工作......
勾选这个jsfiddle.net/Palestinian/t84S3，除非你想滚动到同一页面中的特定div，在这种情况下你需要使用.silentScroll()
@Omar，您能否通过静默滚动示例提供此答案作为答案..？我会检查它，是否是答案，到明天..其他两个解决方案，没有工作......
让我们continue this discussion in chat

标签： jquery html jquery-mobile cordova

【解决方案1】：

你想引用一个id，你可以使用一个段落，一个span或者一个div。

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

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

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

还有，你的做法

<a name="try/> Header2

不正确，您的报价关闭丢失并且您没有正确关闭 a 属性。

【讨论】：

感谢@Jonast92 的回答..但是，我认为您错过了重点！它是 jquery mobile...以不同的方式工作..！ :) 仍在讨论其他答案...您可以看看并提供您的想法..!! :)
它对我不起作用。我在 blazor 应用程序的剃须刀页面中使用了它。它进入一个新页面“/try”

【解决方案2】：

在您添加的最后一个 jsfiddle 中，您在选择器和 HTML 属性中存在一些错误。您可以使用带有唯一标识符的 id 属性和选择器 $('#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 是活动/当前页面/视口。

【讨论】：

嗨 Omar，代码在 JsFiddle 中运行良好，但在模拟器中不行！这可能意味着什么......？我使用的是 Phonegap 框架，而不是原生 android。
@Mannii88 它应该适用于 phonegap。你在不是模拟器的设备上测试过吗？
不...我只用模拟器测试它...将用设备试用并告诉你。！

【解决方案3】：

你想引用一个id，你可以使用一个段落，一个span或者一个div。

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

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

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

当您设置 data-ajax false 时，它可以工作:) 刚试过...

【讨论】：