HTML锚链接作为名称而不是ID

Question

是否可以将skip添加到内容以链接到name而不是id？

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

Answer 1

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

1。添加id属性

显然，您可以将id属性添加到目标元素：

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

2。添加锚点

如果需要通过名称标识目标，请添加锚点：

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

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

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>

然后，您应该将此脚本块放在文档的末尾，这样就在结束</body>标记之前。

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

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

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

备注

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