个人作品集资质板块教育/工作标签切换失效问题求助

问题原因 #

这里有两个错误导致切换失效：

• 大小写不匹配：HTML里教育板块的id写的是id="Education"（首字母大写E），但是教育按钮的data-target属性写的是#education（首字母小写e），JS的document.querySelector查找元素是大小写敏感的，所以点击教育按钮时找不到对应元素，没法添加显示类。
• JS逻辑错误：处理按钮激活状态的代码写错了，最后一行错误地给内容元素target重复加了q_active类，没有给当前点击的按钮加激活类。

修复方法 #

1. 修正HTMLid大小写 #

把教育板块的id改成和data-target一致的小写即可：

<div class="q_content q_active " data-content id="education">

你也可以把按钮的data-target改成#Education，只要两边大小写匹配就行。

2. 修正JS逻辑 #

把JS里给按钮加激活类的部分修改正确：

const tabs = document.querySelectorAll('[data-target]'),
tabc = document.querySelectorAll('[data-content]');

tabs.forEach(tab =>{
    tab.addEventListener('click', () =>{
        const target = document.querySelector(tab.dataset.target);

        // 切换内容显示状态
        tabc.forEach(tabct  =>{
            tabct.classList.remove('q_active');
        });
        target.classList.add('q_active');

        // 切换按钮激活状态
        tabs.forEach(t =>{
            t.classList.remove('q_active');
        });
        // 给当前点击的按钮加激活类，不是给内容元素target加
        tab.classList.add('q_active');
        
    });
});

修改完两处代码就能正常切换两个标签了。

内容的提问来源于stack exchange，提问作者Yogesh s Chowdgund