JavaScript实现链接点击切换class变色无响应如何解决

完全可以通过JavaScript实现<a>链接元素的class切换效果，你当前代码点击无响应是存在基础语法错误，同时未实现多链接互斥激活的逻辑，具体修正方案如下：

代码失效核心原因 #

• JS方法名大小写错误：代码中写的document.getElementByID为错误写法，DOM标准方法为document.getElementById，末尾的d需小写，写法错误会直接导致JS运行抛出异常，后续逻辑全部终止，这是点击无效果的核心诱因，和<a>标签本身特性无关，你之前用button实现成功换a标签失效也和标签类型没有关系
• 样式逻辑缺陷：仅靠toggle切换单个class会出现两个状态class同时存在的情况，后加载的CSS规则会覆盖样式，导致显示异常
• 互斥逻辑缺失：现有代码仅处理单个元素的切换，没有实现「点击其他链接时，已激活链接恢复默认黑色」的单选效果
• 默认行为干扰：<a>标签自带锚点跳转逻辑，点击后会触发页面定位跳动，影响交互体验

可直接运行的修正代码 #

<html>
<style>
.the-button-inactive {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background-color: black;
}
.the-button-active {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background-color: blue;
}
</style>
<body>
<div class="the-button-container">
    <a href="#the-image-1" class="nav-btn the-button-inactive"></a>
    <a href="#the-image-2" class="nav-btn the-button-inactive"></a>
    <a href="#the-image-3" class="nav-btn the-button-inactive"></a>
</div>

<script>
// 获取同组所有导航按钮
const buttonGroup = document.querySelectorAll('.nav-btn');
buttonGroup.forEach(btn => {
    btn.addEventListener('click', function(e) {
        // 全组重置为未激活状态
        buttonGroup.forEach(item => {
            item.classList.remove('the-button-active');
            item.classList.add('the-button-inactive');
        })
        // 当前点击项设置为激活状态
        this.classList.remove('the-button-inactive');
        this.classList.add('the-button-active');
        // 阻止a标签默认锚点跳转
        e.preventDefault();
    })
})
</script>
</body>
</html>

实现说明 #

• 弃用内联onclick绑定，采用事件监听统一绑定事件，避免全局函数污染
• 点击时先遍历全组按钮，全部重置为黑色未激活状态，再单独给当前点击项设置蓝色激活样式，逻辑稳定不会出现状态错乱
• 增加e.preventDefault()阻止a标签默认跳转行为，避免页面跳动

如果仅需要单个按钮的来回切换效果，修正getElementById的大小写问题后，toggle方法即可正常工作；如果需要同组按钮互斥单选的效果，建议使用「全局重置+单独设置当前项」的逻辑，比多次调用toggle更可靠。

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