JavaScript切换HTML按钮active类失效：仅添加不删除问题排查

问题根源 #

你的代码里有几个关键错误导致切换失效：

• 选错操作对象：sectBtns选中的是.controlls容器而非单个按钮，遍历它移除active类根本不会影响到按钮。
• 类名不匹配：HTML里默认激活的按钮用的是active-btn类，但JS里操作的是active类，两边对不上。
• 事件目标错误：点击按钮时，实际触发事件的可能是里面的<i>图标，这时候e.target不是按钮元素，不仅拿不到data-id，还会把active类加到图标上。
• 语法错误：JS代码末尾多了一个多余的}，会导致脚本执行失败。
• 路径错误：HTML里的脚本路径写的是app,js，逗号应该改成点，变成app.js。

修复后的代码 #

JavaScript代码

const sections = document.querySelectorAll('.section');
const sectBtn = document.querySelectorAll('.control');
const allSections = document.querySelector('.main-content');

allSections.addEventListener('click', (e) => {
    // 找到实际的按钮元素（兼容点击图标的情况）
    const btn = e.target.closest('.control');
    if (!btn) return;
    
    const id = btn.dataset.id;
    if (id) {
        // 移除所有按钮的active类
        sectBtn.forEach((button) => {
            button.classList.remove('active');
        });
        // 给当前点击的按钮添加active类
        btn.classList.add('active');
        
        // 隐藏所有section，显示对应section
        sections.forEach((section) => {
            section.classList.remove('active');
        });
        const element = document.getElementById(id);
        element.classList.add('active');
    }
});

HTML代码（关键修改部分）

<body class="main-content">
    <header class="section sec1 header active" id="home"></header>
    <main> 
        <section class="section sec2 about" id="about"></section>
        <section class="section sec3 portfolio" id="portfolio"></section>
        <section class="section sec4 blog" id="blogs"></section>
        <section class="section sec5 contact" id="contact"></section>
    </main>

    <div class="controlls">
        <!-- 把active-btn改成active，统一类名 -->
        <div class="control control-1 active" data-id="home">
            <i class="fa-solid fa-house"></i>
        </div>
        <div class="control control-2" data-id="about">
            <i class="fa-solid fa-id-badge"></i>
        </div>
        <div class="control control-3" data-id="portfolio">
            <i class="fa-solid fa-briefcase"></i>
        </div>
        <div class="control control-4" data-id="blogs">
            <i class="fa-solid fa-newspaper"></i>
        </div>
        <div class="control control-5" data-id="contact">
            <i class="fa-solid fa-address-card"></i>
        </div>
    </div>

    <!-- 修正脚本路径的逗号为点 -->
    <script src="/reactiveportfolio/html/app.js"></script>
</body>

核心修复点说明 #

1. 用closest('.control')获取按钮：不管点击的是按钮本身还是里面的图标，都能正确拿到对应的按钮元素，避免事件目标错误。
2. 统一类名：把HTML里的active-btn改成active，和JS里操作的类名保持一致。
3. 修正操作对象：遍历sectBtn（所有.control按钮）来移除active类，而不是容器。
4. 修复语法和路径错误：去掉多余的闭合括号，修正脚本文件路径的拼写错误。

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