HTML 锚点跳转不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21837104/
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
HTML Anchor Jump Doesn't Work
提问by Moussa Harajli
The title means what it says. when i setup a link to jump to a certain div it doesn't work. For example when i say <a href="#Section1>Section 1</a>and click it, it should jump to the anchor tag with the name of 'Section1' <a name="Section1"></>but nothing happens.
标题就是它所说的意思。当我设置一个链接跳转到某个 div 时它不起作用。例如，当我说<a href="#Section1>Section 1</a>并单击它时，它应该跳转到名称为“Section1”的锚标记，<a name="Section1"></>但没有任何反应。
<main id="Main">
<div class="Container">
<div class="Section-Links Left Box-Sizing">
<div class="Links">
<a href="#test">Test Post</a>
<a href="#test2">Test Post</a>
<a href="#test3">Test Post</a>
<a href="#test4">Test Post</a>
<a href="#test5">Test Post</a>
<a href="#test6">Test Post</a>
<a href="#test7">Test Post</a>
<a href="#test8">Test Post</a>
<a href="#test9">Test Post</a>
<a href="#test10">Test Post</a>
</div>
</div>
<div class="Sections Left Box-Sizing">
<div class="Section">
<a name="Test"></a>
<span class="Section-Title">Test Section</span>
<p class="Section-Text">Some Random Words Here.</p>
</div>
<div class="Section">
<a name="Test2"></a>
<span class="Section-Title">Test Section</span>
<p class="Section-Text">Some Random Words Here.</p>
</div>
<div class="Section">
<a name="Test3"></a>
<span class="Section-Title">Test Section</span>
<p class="Section-Text">Some Random Words Here.</p>
</div>
<div class="Section">
<a name="Test4"></a>
<span class="Section-Title">Test Section</span>
<p class="Section-Text">Some Random Words Here.</p>
</div>
<div class="Section">
<a name="Test5"></a>
<span class="Section-Title">Test Section</span>
<p class="Section-Text">Some Random Words Here.</p>
</div>
<div class="Section">
<a name="Test6"></a>
<span class="Section-Title">Test Section</span>
<p class="Section-Text">Some Random Words Here.</p>
</div>
<div class="Section">
<a name="Test7"></a>
<span class="Section-Title">Test Section</span>
<p class="Section-Text">Some Random Words Here.</p>
</div>
<div class="Section">
<a name="Test8"></a>
<span class="Section-Title">Test Section</span>
<p class="Section-Text">Some Random Words Here.</p>
</div>
<div class="Section">
<a name="Test9"></a>
<span class="Section-Title">Test Section</span>
<p class="Section-Text">Some Random Words Here.</p>
</div>
<div class="Section">
<a name="Test10"></a>
<span class="Section-Title">Test Section</span>
<p class="Section-Text">Some Random Words Here.</p>
</div>
</div>
<div class="Clear"></div>
</div>
<p class="Footer-Masthead">Created By Moussa Harajli.</p>
</main>
if you would like to test this go here. http://67.184.73.19/Projects/Assassins/rules.php
如果你想测试这个去这里。 http://67.184.73.19/Projects/Assassins/rules.php
回答by idmean
Anchor links doesn't point to names but to ids
锚链接不是指向names 而是指向ids
so change for example:
所以改变例如：
<a name="Test7"></a>
to:
到：
<a id="Test7"></a>
And you should not change the capitalization of the ids in the id attribute and the links.
并且您不应更改 id 属性和链接中 id 的大小写。
回答by beautifulcoder
Try setting the id in the divtag:
尝试在div标签中设置 id ：
<div id="test" class="Section">...</div>
And this should work:
这应该有效：
<a href="#test">Test Post</a>
回答by Lea Hayes
The reason behind your problem is that you have different ID's in your links since test2is not the same as Test2.
您的问题背后的原因是您的链接中有不同的 ID，因为test2与Test2.
Though... from my experience the <a>element is essentially redundant since the following works in all modern browsers:
虽然......根据我的经验，该<a>元素本质上是多余的，因为以下内容适用于所有现代浏览器：
<main id="Main">
<div class="Container">
<div class="Section-Links Left Box-Sizing">
<div class="Links">
<a href="#test">Test Post</a>
<a href="#test2">Test Post</a>
</div>
</div>
<div class="Sections Left Box-Sizing">
<div id="test" class="Section">
<span class="Section-Title">Test Section</span>
<p class="Section-Text">Some Random Words Here.</p>
</div>
<div id="test2" class="Section">
<span class="Section-Title">Test Section</span>
<p class="Section-Text">Some Random Words Here.</p>
</div>
