history.replaceState仅对ID生效，类选择器无效的URL处理问题

问题背景 #

要实现点击锚点链接后页面跳转，但URL不添加锚点后缀（保持index.html而非index.html#anc-a），通过单个ID绑定事件可以实现，但使用类选择器或批量选择器时功能失效。

原可行代码（单个ID绑定） #

HTML

<a target="_self" id="anchor-a" href="#anc-a">Anchor A</a>
<a target="_self" id="anchor-b" href="#anc-b">Anchor B</a>
<a target="_self" id="anchor-c" href="#anc-c">Anchor C</a>

JavaScript

document.getElementById('anchor-a').addEventListener("click", function(event) {
event.preventDefault();
location.hash = event.target.getAttribute('href').substr(1);
history.replaceState(null, null, ' ');
});
document.getElementById('anchor-b').addEventListener("click", function(event) {
event.preventDefault();
location.hash = event.target.getAttribute('href').substr(1);
history.replaceState(null, null, ' ');
});
document.getElementById('anchor-c').addEventListener("click", function(event) {
event.preventDefault();
location.hash = event.target.getAttribute('href').substr(1);
history.replaceState(null, null, ' ');
});

批量选择器失效的原因 #

getElementsByClassName和querySelectorAll返回的是元素集合（NodeList/HTMLCollection），而非单个DOM元素，直接给集合绑定addEventListener会失效，必须遍历集合中的每个元素，单独绑定事件。

你之前尝试的写法存在以下问题：

• getElementsByClassName('.anchors')：类选择器无需加.，正确写法为getElementsByClassName('anchors')
• querySelectorAll("anchors")：类选择器需加.，正确写法为querySelectorAll(".anchors")
• 所有写法都缺少遍历元素并逐个绑定事件的核心步骤

正确的批量绑定方案 #

将所有锚点标签添加统一类名（比如class="anchors"），然后用以下代码实现批量绑定：

修改后的HTML

<a target="_self" class="anchors" href="#anc-a">Anchor A</a>
<a target="_self" class="anchors" href="#anc-b">Anchor B</a>
<a target="_self" class="anchors" href="#anc-c">Anchor C</a>

批量绑定的JavaScript

document.querySelectorAll('.anchors').forEach(anchor => {
    anchor.addEventListener("click", function(event) {
        event.preventDefault();
        location.hash = event.target.getAttribute('href').substr(1);
        history.replaceState(null, null, ' ');
    });
});

若想通过多个ID批量选择，也可使用querySelectorAll选中多个ID元素后遍历：

document.querySelectorAll("#anchor-a, #anchor-b, #anchor-c").forEach(anchor => {
    anchor.addEventListener("click", function(event) {
        event.preventDefault();
        location.hash = event.target.getAttribute('href').substr(1);
        history.replaceState(null, null, ' ');
    });
});

原理说明 #

1. querySelectorAll('.anchors')选中所有带anchors类的锚点元素
2. forEach遍历每个元素，为每个元素绑定点击事件
3. 事件逻辑与单个ID绑定一致：阻止默认跳转行为→设置页面锚点→用history.replaceState清除URL中的锚点后缀

内容的提问来源于stack exchange，提问作者Walter