Html <a href="#..."> 链接无效
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23282075/
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
<a href="#..."> link not working
提问by user2592232
I am trying to create a set of links to specific sections in the page using the <a href="#...">notation, but it doesn't seem to work. Clicking on the link seems to do nothing and right-click -> open in a new tabchanges the url but does not move to a different section of the page. I am using Firefox 28.0. My links are as follows:
我正在尝试使用该<a href="#...">符号创建一组指向页面中特定部分的链接，但它似乎不起作用。单击该链接似乎什么也没做并right-click -> open in a new tab更改了 url，但不会移动到页面的不同部分。我正在使用 Firefox 28.0。我的链接如下：
<div>
<p>Contents</p>
<ul>
<li><a href="#map">Map</a></li>
<li><a href="#timing">Timing</a></li>
<li><a href="#timingdetails">Timing Details</a></li>
</ul>
</div>
And they should be linking to:
他们应该链接到：
<div id="map">[content]</div>
<div id="timing">[content]</div>
<div id="timingdetails">[content]</div>
Links to external webpages work fine. Placing the id="..."feature inside an <a>tag instead did not fix the problem. My webpage url is of the form http://127.0.0.1/foo/bar/baz/. This is within a Python Django project.
指向外部网页的链接工作正常。将id="..."功能放在<a>标签内并不能解决问题。我的网页网址的形式是http://127.0.0.1/foo/bar/baz/。这是在 Python Django 项目中。
Any idea why this isn't working?
知道为什么这不起作用吗？
回答by Roberto Reale
Every hrefneeds a corresponding anchor, whose nameor idattribute must match the href(without the #sign). E.g.,
每个都href需要一个对应的anchor，其name或id属性必须匹配href（不带#符号）。例如，
<a href="#map">Map</a>
<a name="map">[content]</a>
An enclosing divis not necessary, if not used for other purposes.
div如果不用于其他目的，则不需要封闭。
回答by Tyblitz
Wow, thanks for pointing that out OP. Apparently Mozilla Firefox doesn't associate the idattribute with a location in the HTML Document for elements other than <a>but uses the nameattribute instead, and Google Chrome does exactly the opposite. The most cross-browser proof solution would be to either:
哇，感谢您指出 OP。显然，Mozilla Firefox 不会将该id属性与 HTML 文档中的元素位置相关联，<a>而是使用该name属性来代替，而 Google Chrome 则恰恰相反。最跨浏览器的解决方案是：
1.Give your anchor divsboth a nameand an idto ensure max. browser compatibility, like:
1.给你的锚点divs一个name和一个id以确保最大。浏览器兼容性，例如：
<a href="#map">Go to Map</a> <!-- Link -->
----
<div id="map" name="map"></div> <!-- actual anchor -->
Demo: http://jsbin.com/feqeh/3/edit
演示：http: //jsbin.com/feqeh/3/edit
2.Only use <a>tags with the nameattribute as anchors.
2.只使用<a>带有name属性的标签作为锚点。
This will allow the on-page links to work in all browsers.
这将允许页面上的链接在所有浏览器中工作。
回答by Basheer AL-MOMANI
what happened with me is that the href does not worksecond timeand that because I should Remove hashvalue first,,
发生在我身上的是href does not worksecond time，因为我应该Remove hash首先重视，，
take look how I resolved it
看看我是怎么解决的
<a href="#1" onclick="resetHref();">go to Content 1</a>
function resetHref() {
location.hash = '';
}
回答by rohan parab
This might help
这可能有帮助
JS:
JS：
function goto($hashtag){
document.location = "index.html#" + $hashtag;
}
HTML :
HTML :
<li><a onclick="goto('aboutus')">ABOUT</a></li>
回答by Kyubey
Just resurrecting this post because I had a similar problem and the reason was something else.
只是复活了这篇文章，因为我有一个类似的问题，原因是别的。
In my case it was because we had:
就我而言，这是因为我们有：
<base href="http://mywebsite.com/">
defined on the .
上定义的。
Obviously, don't just remove it, because you need it if you are using relative paths.
显然，不要只是删除它，因为如果您使用相对路径，则需要它。
Read more here: https://www.w3schools.com/tags/tag_base.asp
在此处阅读更多信息：https: //www.w3schools.com/tags/tag_base.asp
回答by Natasha
<a href="#1">Content 1</a>
<a href="#2">Content 2</a>
<a href="#3">Content 3</a>
....
<a name="1"></a>Text here for content 1
<a name="2"></a>Text here for content 2
<a name="3"></a>Text here for content 3
When clicking on "Content 1" it will take directly to "Text here for Content 1. Guaranteed!
单击“内容 1”时，它将直接转到“内容 1 的文本此处。保证！”
回答by user3315171
Here is something that I finally got to work in IE, Chrome and Firefox.
这是我最终在 IE、Chrome 和 Firefox 中工作的东西。
Around any text create an anchor tag like this:
在任何文本周围创建一个锚标记，如下所示：
<a class="anchor" id="X" name="X">text</a>
Set "X" to whatever you want.
将“X”设置为您想要的任何内容。
You must enclose something in the anchor tags such as text or an image. It will NOT work without these.
您必须在锚标记中包含一些内容，例如文本或图像。如果没有这些，它将无法工作。
For the link, use this:
对于链接，请使用：
<a href="#X">text</a>
As for getting rid of the CSS for links using our anchor tag use something like this:
至于使用我们的锚标记摆脱链接的 CSS，请使用以下内容：
a.anchor {
color:#000;
text-decoration:none;
}
This seems to work well.
这似乎运作良好。
