如何使用 HTML5、JQuery mobile 中的链接在同一页面内进行内部导航？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18338996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to navigate internally within same Page using links in HTML5, JQuery mobile..?
提问by Mannii88
I have a scenario, wherein I am trying to navigate within page of my Android App using links. I am using HTML5with Phonegapand JQuery Mobile.
我有一个场景，其中我尝试使用链接在我的 Android 应用程序页面内导航。我正在使用带有Phonegap和 JQuery Mobile 的HTML5。
For ex, I am having:
例如，我有：
<h3><a name="try"/> Header2 </h3>
and when I give,
当我付出时，
<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..?
为了导航到同一页面中的标题部分，我无法这样做。有人可以为这个问题提供一些解决方案吗..？
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:
作为@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>
The above code is for reference to one of the provided solutions.
以上代码仅供参考提供的解决方案之一。
采纳答案by Omar
In the last jsfiddle you added, you had some mistakes in selectors and HTML attributes. You either use idattribue with a unique identifier, and selector $('#Anyname')- case sensitive (mind capital/small letters) - to access properties of that element.
在您添加的最后一个 jsfiddle 中，您在选择器和 HTML 属性中出现了一些错误。您可以使用id具有唯一标识符的属性和选择器$('#Anyname')- 区分大小写（注意大写/小写字母） - 来访问该元素的属性。
Or, use nameattribute with a unqiue identifier, and selector $('[name=Somename]')- case sensitive (mind capital/small letters) - to access properties of that element.
或者，使用name具有唯一标识符的属性和选择器$('[name=Somename]')- 区分大小写（注意大写/小写字母） - 访问该元素的属性。
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).
要向下滚动到任何元素，jQuery Mobile 有自己的滚动功能.silentScroll()。请注意$.mobile.silentScroll()，与.animate({ scrollTop: value }, animation-speed).
$('selector').on('click', function () {
var position = $.mobile.activePage.find('#vowels2').get(0).offsetTop;
$.mobile.silentScroll(position);
});
Where .get(0).offsetTopis the yaxis position value of the target element, and $.mobile.activePageis the active/current page/viewport.
其中.get(0).offsetTop是目标元素的y轴位置值，$.mobile.activePage是活动/当前页面/视口。
回答by Jonast92
You want to reference an id, you can use a paragraph, a span or a div.
你想引用一个 id，你可以使用一个段落、一个跨度或一个 div。
<span id="try">Header2</span>
You can then navigate to it as expected:
然后您可以按预期导航到它：
<a href="#try">Navigate to Header2</a>
Also, the way you were doing
另外，你的方式
<a name="try/> Header2
is incorrect, your quote closing is missing and you're not closing the a attribute properly.
不正确，您的报价关闭丢失，并且您没有正确关闭 a 属性。
回答by Ebru Güng?r
You want to reference an id, you can use a paragraph, a span or a div.
你想引用一个 id，你可以使用一个段落、一个跨度或一个 div。
<span id="try">Header2</span>
You can then navigate to it as expected:
然后您可以按预期导航到它：
<a href=" #try" data-ajax="false">Navigate to Header2</a>
When you set data-ajaxfalse it works :)
Just tried...
当您设置为data-ajaxfalse 时，它会起作用:) 刚试过...
