Html 锚标签中的散列

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6582233/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:23:30  来源:igfitidea点击:

hash in anchor tags

htmlanchor

提问by oshirowanen

How do I load a page and get it to open at a certain location of the loaded page?

如何加载页面并让它在加载页面的特定位置打开?

For example, lets say I have page1.html, which has 3 links

例如,假设我有page1.html,它有 3 个链接

<a href="page2.html#1">1</a>
<a href="page2.html#2">2</a>
<a href="page2.html#3">3</a>

on page2.html, I have those links on the page also, i.e.

page2.html,我在页面上也有这些链接,即

<a href="page3.html#1">1</a>
<a href="page3.html#2">2</a>
<a href="page3.html#3">3</a>

but when I click on the #2or #3link from page1.html, they always open at the top of the page, even though #2and #3are off the screen on page2.htmlwhich need to be scrolled down to to be seen.

但是当我点击#2#3链接的page1.html,他们总是在页面的顶部开放,即使#2#3在关闭屏幕page2.html需要被向下滚动到待观察。

Not sure what I am doing wrong.

不知道我做错了什么。

回答by Konrad Rudolph

You need to put namedanchors on page2.html, like so:

您需要将命名锚放在 上page2.html,如下所示:

<a id="1"></a>
…
<a id="2"></a>
…
<a id="3"></a>

回答by Addsy

You need to add an ID to the element that it should 'jump' to.

您需要为它应该“跳转”到的元素添加一个 ID。

For example, if you have

例如,如果你有

<div id="part1">
  <p>Blah blah blah</p>
</div>

<div id="part2">
  <p>Blah blah blah</p>
</div>

<div id="part3">
  <p>Blah blah blah</p>
</div>

And they are all in page.html

他们都在 page.html

Then you can link to page.html#part1, page.html#part2etc etc and it will jump to the correct part of the page

然后你可以链接到page.html#part1page.html#part2等等,它会跳转到页面的正确部分

Update:

更新:

You can also use the name attribute however I prefer to use id. This is because anything can have a id but not necessarily a name. For example I don't think name is a valid attribute for an 'a' tag in HTML 5. Also if you have one element with id="part1" and another different element with name="part1", the one with the id will take precendence. To avoid confusion, I just stick with the one method throughout. There's a bit more of a discussion on this here

您也可以使用 name 属性,但我更喜欢使用 id。这是因为任何东西都可以有一个 id 但不一定有一个名字。例如,我不认为 name 是 HTML 5 中“a”标记的有效属性。此外,如果您有一个 id="part1" 的元素和另一个 name="part1" 的不同元素,则带有 id 的元素将优先。为避免混淆,我始终坚持使用一种方法。还有更多的讨论对这个有点这里

回答by Tony Fiorentini

Use of the name attribute or id attribute in an anchor tag on the targetpage would accomplish the desired result.

目标页面上的锚标记中使用 name 属性或 id 属性将实现所需的结果。

<a name="someLocation" id="someLocation">SomeText</a>

As an XHTML 1.1 convention, the name attribute of an anchor tag has been replaced by the id attribute. In the context of XHTML 1.0, the name attribute is considered deprecated.

作为 XHTML 1.1 约定,锚标记的 name 属性已替换为 id 属性。在 XHTML 1.0 的上下文中,name 属性被认为是过时的。

See this answerfor a related discussion on changes to the anchor tag.

有关锚标记更改的相关讨论,请参阅此答案

To summarize: for compatibility reasons, many suggest the use of both an id attribute and a name attribute, within the same element. In this case, an anchor tag.

总结:出于兼容性原因,许多人建议在同一元素中同时使用 id 属性和 name 属性。在这种情况下,锚标记。

The W3C Standardrecommends (with respect to all applicable elements):

W3C 标准建议(关于所有适用元素):

The id and name attributes share the same name space. This means that they cannot both define an anchor with the same name in the same document. It is permissible to use both attributes to specify an element's unique identifier for the following elements: A, APPLET, FORM, FRAME, IFRAME, IMG, and MAP. When both attributes are used on a single element, their values must be identical.

id 和 name 属性共享相同的名称空间。这意味着它们不能在同一个文档中都定义同名的锚点。允许使用这两个属性来为以下元素指定元素的唯一标识符:A、APPLET、FORM、FRAME、IFRAME、IMG 和 MAP。当这两个属性用于单个元素时,它们的值必须相同。

Apologies for any duplication, I lack the reputation to comment on the best answer.

为任何重复道歉,我缺乏评论最佳答案的声誉。

回答by BananaAcid

Since this posts are still found, i would like to add an update:

由于仍然找到这篇文章,我想添加一个更新:

<a href="#jumppoint">goto '#jumppoint'</a>

does jump to:

确实跳转到:

<div id="jumppoint">  <!-- name="" does not work here on modern browsers -->
   <h2>here</h2>
</div>

and:

和:

<a name="jumppoint" />
<h2>here</h2>

回答by monsieur_h

Either name your anchors or put links to your elements:

命名您的锚点或放置指向您元素的链接:

www.yoursite/index.html#content Will scroll you to <div id="content">if it exists, or to <div name="content">.

www.yoursite/index.html#content 将滚动到您(<div id="content">如果存在),或滚动到<div name="content">

回答by Ovais Khatri

you must assign section names or ids 1 , 2 and 3 to sections , then it will work for you..

您必须将部分名称或 ID 1 、 2 和 3 分配给部分,然后它将为您工作..