我有点困惑，我想在我的 HTML 页面中创建一个链接，该链接将跳转到另一个页面中的特定部分。我看到了以“名称”作为锚点的示例，也看到了带有“ID”的示例。
据我了解，“名称”是旧样式，“ID”是新浏览器支持的新样式。但是，如果我想确保我的链接在新旧浏览器中都能正常工作怎么办？我能否以某种方式将“姓名”和“ID”组合在一起，以便我的链接可以在任何浏览器中使用，无论它是旧的还是新的？
一个简单的示例代码会很好。
谢谢！
【问题讨论】：
name 不是，您不能从一个链接链接到 2 个不同的元素。任何太旧而不支持id 的浏览器都太旧而无需担心支持。我们说的是“浏览器大战”时代的浏览器。
标签： html css hyperlink anchor sections
据我所知，name 属性不能用作 URL 中的锚引用。此外，name 不能用于所有类型的 HTML 元素。例如，<a> 元素没有有效的name 属性。
name 属性用于表单字段，不像id 属性那样是唯一的。见这里：Difference between id and name attributes in HTML
使用id 属性作为锚点，它应该在任何浏览器中都能正常工作。看看这个答案的实现细节：Should I make HTML Anchors with 'name' or 'id'?
【讨论】：
<a> 标记的名称属性（我提到了 标记，因为在您附加的示例中使用了该标记）。将name 和id 一起使用是没有意义的，因为您的链接只能有一个目标。请参阅以下页面，在“定义和使用”和“浏览器支持”部分下：w3schools.com/tags/att_a_name.asp 标准做法是对链接使用id，对表单元素使用name 标签。应该没有任何问题，因为所有现代浏览器都支持 HTML5 标准。
<id> 标签。它应该适用于新旧浏览器（虽然旧是一个相对术语，但 2000 年之前的任何东西都可以被认为是古老的）。当然，您可以将name 和id 标签都放在目标元素中，并将它们设置为相同的值，在锚点中引用该值，事情应该可以正常工作。这与您刚刚使用 id 几乎没有任何区别。
Id 是更好的方法。请看下面 -
<ul class="tabs_list_block">
<li><a href="#menu1">Menu1</a></li>
<li><a href="#menu2">Menu2</a></li>
<li><a href="#menu3">Menu3</a></li>
<li><a href="#menu4">Menu4</a></li>
</ul>
<div class="tab_content">
<div id="menu1" class="tab_content_row tab_content_row01">Menu1</div>
<div id="menu2" class="tab_content_row tab_content_row02">Menu2</div>
<div id="menu3" class="tab_content_row tab_content_row03">Menu3</div>
<div id="menu4" class="tab_content_row tab_content_row04">Menu4</div>
</div>
.tabs_list_block {
width: 100%;
min-height: 50px;
display: flex;
align-items: center;
border-bottom: solid 1px #ccc;
position: fixed;
top: 0;
width: 100%;
background-color: #ffffff;
}
.tabs_list_block li {
border-right: solid 1px #ccc;
flex: 1 1 auto;
height: 100%;
text-align: center;
}
.tabs_list_block li:last-child {
border-right: 0;
}
.tabs_list_block li a {
width: 100%;
height: 100%;
padding: 16px;
color: #ccc;
}
.tab_content {
margin-top: 50px;
}
.tab_content_row {
min-height: calc(100vh - 50px);
display: flex;
align-items: center;
justify-content: center;
}
.tab_content_row01 {
background-color: #ffbf73;
}
.tab_content_row02 {
background-color: #eaff73;
}
.tab_content_row03 {
background-color: #8cf9f0;
}
.tab_content_row04 {
background-color: #ddc4ff;
}
<script type="text/javascript">
$(".tabs_list_block").find("a").click(function(e) {
e.preventDefault();
var section = $(this).attr("href");
$("html, body").animate({
scrollTop: $(section).offset().top - 0
});
});
【讨论】：