如何使用 HTML5、JQuery mobile 中的链接在同一页面内进行内部导航? [英] How to navigate internally within same Page using links in HTML5, JQuery mobile..?
问题描述
我有一个场景，其中我尝试使用链接在我的 Android 应用程序页面内导航.我正在使用 HTML5 和 Phonegap 和 JQuery Mobile.
I have a scenario, wherein I am trying to navigate within page of my Android App using links. I am using HTML5 with Phonegap and JQuery Mobile.
例如，我有:
<h3><a name="try"/> Header2 </h3>
当我付出时，
<a href="#try"> Navigate to Header2 </a>
为了导航到同一页面中的页眉部分，我无法这样做.有人可以为这个问题提供一些解决方案吗?
in order to navigate to the Header section within the same page, I am unable to do so. Can someone please provide some solution for this problem..?
作为@Adleer 提供的解决方案的一部分，尝试使用同一 HTML 文档的多个部分.下面是一个示例代码供参考:
As part of solution given by @Adleer, tried working with for multiple sections of the same HTML document. Below is a sample code for reference:
<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>
以上代码仅供参考提供的解决方案之一.
The above code is for reference to one of the provided solutions.
推荐答案
在您添加的最后一个 jsfiddle 中，您在选择器和 HTML 属性方面有一些错误.您可以使用带有唯一标识符的 id 属性和选择器 $('#Anyname') - 区分大小写(注意大写/小写字母) - 访问该元素的属性.
In the last jsfiddle you added, you had some mistakes in selectors and HTML attributes. You either use id attribue with a unique identifier, and selector $('#Anyname') - case sensitive (mind capital/small letters) - to access properties of that element.
或者，使用带有唯一标识符的 name 属性和选择器 $('[name=Somename]') - 区分大小写(注意大写/小写字母) -访问该元素的属性.
Or, use name attribute with a unqiue identifier, and selector $('[name=Somename]') - case sensitive (mind capital/small letters) - to access properties of that element.
要向下滚动到任何元素，jQuery Mobile 有自己的滚动函数 .silentScroll().注意 $.mobile.silentScroll() 没有动画，不像 .animate({ scrollTop: value }, animation-speed).
To scroll down to any element, jQuery Mobile has its' own scroll function .silentScroll(). Note that $.mobile.silentScroll() has no animation, unlike .animate({ scrollTop: value }, animation-speed).
$('selector').on('click', function () {
var position = $.mobile.activePage.find('#vowels2').get(0).offsetTop;
$.mobile.silentScroll(position);
});
其中.get(0).offsetTop为目标元素的y轴位置值，$.mobile.activePage为活动/当前页面/视口.
Where .get(0).offsetTop is the y axis position value of the target element, and $.mobile.activePage is the active/current page/viewport.
这篇关于如何使用 HTML5、JQuery mobile 中的链接在同一页面内进行内部导航?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
