HTML anchor 链接作为名称而不是 id

Question

是否可以添加 skip to content 以链接到名称而不是 id？

<a id="skiptocontent" href="#main" class="">skip to main content</a>
<h1 name="main">Main</h1>

Answer 1

不，这是不可能的。有一些解决方法:

1。添加id属性(property)

显然，您可以添加 id目标元素的属性:

<h1 name="main" id="main">Main</h1>

2。添加 anchor

如果目标需要通过名字来标识，添加一个 anchor :

<a name="main"/><h1>Main</h1>

但在 HTML5 中 name a 的属性元素 is obsolete .

3。使用脚本添加 id属性

您可以添加一个脚本来添加缺失的 id页面加载属性:

<script>
    // find first element that has the name attribute set to "main":
    var element = document.querySelector('[name=main]');
    // copy that value into the id attribute
    element.setAttribute('id', element.getAttribute('name')); 
</script>

然后你应该把这个脚本 block 放在文档的末尾，所以就在结束之前 </body>标签。

4。将脚本添加到源链接:

您可以替换 href值与将根据 name 执行操作的脚本属性:

<a id="skiptocontent" 
   href="javascript:document.querySelector('[name=main]').scrollIntoView();" 
   class="">skip to main content</a>

备注

当您使用 HTML5 标记问题时，应该注意的是，在 HTML5 中明显不再使用 name。属性作为目标。 id属性在 HTML5 中是首选。这是有道理的，因为 name值不必是唯一的，而 id值必须是。