无法在分区之间切换

Question

我正在通过观看本教程创建作品集 - https://www.youtube.com/watch?v=27JtRAI3QO8&list=WL&index=12（我卡在了 1:12:13）我创建了一个资格部分。有两个部门，即教育和工作。默认情况下它显示教育选项卡。当我单击工作选项卡时，它会在工作选项卡中显示内容。但是，当我返回教育选项卡时，它不会显示教育选项卡的内容。实际上我是js的初学者。我无法得到 js 文件中的错误。我的 Html 代码是

<section class="qualification section">
                <h2 class="section_title">Qualification</h2>
                <span class="section_subtitle">My personal journey</span>

                <div class="q_container container">
                    <div class="q_tabs">
                        <div class="q_btn btn-flex q_active " data-target ='#education'>
                            <i class="uil uil-graduation-cap q_icon"></i>Education
                        </div>

                        <div class="q_btn btn-flex " data-target ='#work'>
                            <i class="uil uil-briefcase-alt q_icon"></i>Work
                        </div>
                    </div>

                    <div class="q_section">
                         <!--==================== QUALIFICATION  c1====================-->
                         <div class="q_content q_active " data-content id="Education">
                             <!--==================== QUALIFICATION --1====================-->
                             <div class="q_data">
                                 <div>
                                     <h3 class="q_title">Electronics and communication Engineer</h3>
                                     <span class="q_subtitle">M. S Ramaiah University of Applied Sciences</span>
                                     <div class="q_cale">
                                        <i class="uil uil-calendar-alt"></i>2018-2022
                                     </div>
                                 </div>
                                 <div>
                                    <span class="q_round"></span>
                                    <span class="q_line"></span>
                                </div>
                             </div>

                             <!--==================== QUALIFICATION --2====================-->
                             <div class="q_data">
                                 <div></div>
                                 <div>
                                    <span class="q_round"></span>
                                    <span class="q_line"></span>
                                </div>

                                <div>
                                    <h3 class="q_title">PUC</h3>
                                    <span class="q_subtitle">Gurukula independent PU college of science</span>
                                    <div class="q_cale">
                                       <i class="uil uil-calendar-alt"></i>2016-2018
                                    </div>

                                </div>
                            </div>

                            <!--==================== QUALIFICATION --3====================-->
                            <div class="q_data">
                                <div>
                                    <h3 class="q_title">SSLC</h3>
                                    <span class="q_subtitle">Sardar Vallabhbhai Patel Memorial H.S</span>
                                    <div class="q_cale">
                                       <i class="uil uil-calendar-alt"></i>2006-2016
                                    </div>
                                </div>
                                <div>
                                    <span class="q_round"></span>
                                    <span class="q_line"></span>
                                </div>
                            </div>
                         </div>

                         <!--==================== QUALIFICATION  c2====================-->
                         <div class="q_content " data-content id="work">
                            <!--==================== QUALIFICATION --1====================-->
                            <div class="q_data">
                                <div>
                                    <h3 class="q_title">Computer Communication Network and Digital Switching</h3>
                                    <span class="q_subtitle">RTTC BSNL Mysore</span>
                                    <div class="q_cale">
                                       <i class="uil uil-calendar-alt"></i>08/07/2019- 13/07/2019
                                    </div>
                                </div>
                                <div>
                                    <span class="q_round"></span>
                                    <span class="q_line"></span>
                                </div>
                            </div>

                            <!--==================== QUALIFICATION --2====================-->
                            <div class="q_data">
                                <div></div>
                                <div>
                                   <span class="q_round"></span>
                                   <span class="q_line"></span>
                               </div>

                               <div>
                                   <h3 class="q_title">IOT and Computer vision</h3>
                                   <span class="q_subtitle">The Sparks Foundation</span>
                                   <div class="q_cale">
                                      <i class="uil uil-calendar-alt"></i>26/07/2021- 21/08/2021
                                   </div>

                               </div>
                           </div>

                           <!--==================== QUALIFICATION --3====================-->
                           <div class="q_data">
                               <div>
                                   <h3 class="q_title">Electric vehicles</h3>
                                   <span class="q_subtitle">Elite Techno Group</span>
                                   <div class="q_cale">
                                      <i class="uil uil-calendar-alt"></i>18/08/2021- 18/09/2021
                                   </div>
                               </div>
                               <div>
                                   <span class="q_round"></span>
                                   <span class="q_line"></span>
                               </div>
                           </div>
                        </div>
                    </div>
                </div>
            </section>

这是我的 CSS 代码

.skills__container{
    row-gap: 0;
}

.skills__header{
    display: flex;
    align-items: center;
    margin-bottom: var(--mb-2-5);
    cursor: pointer;
}

.skills__icon,
.skills__arrow{
    font-size: 2rem;
    color: var(--first-color);
}

.skills__icon{
    margin-right: var(--mb-0-75);    
}

.skills__title{
    font-size: var(--h3-font-size);
}

.skills__subtitle{
    font-size: var(--small-font-size);
    color: var(--text-color-light);
}

.skills__arrow{
    margin-left: auto;
    transition: .4s;
}

.skills__list{
    row-gap: 1.5rem;
    padding-left: 2.7rem;
}

.skills__title{
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--mb-0-5);
}

.skills__name{
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
}

.skills__bar,
.skills__percentage{
    height: 5px;
    border-radius: .25rem;
}

.skills__bar{
    background-color: hsl(250, 92%, 85%);
}

.skills__percentage{
    display: block;
    background-color: hsl(250, 69%, 61%);
}

.skills__html{ width: 90%;}
.skills__css{ width: 70%;}
.skills__bootstrap{ width: 80%;}
.skills__Angular{ width: 20%;}

.skills__java{ width: 70%;}
.skills__python{ width: 70%;}
.skills__php{ width: 5%;}

.skills__git{ width: 70%;}
.skills__sql{ width: 40%;}
.skills__agile{ width: 10%;}

.skills_close .skills__list{
    height: 0;
    overflow: hidden;
}

.skills_open .skills__list{
    height: max-content;
    margin-bottom: var(--mb-2-5);
}

.skills_open .skills__arrow{
    transform: rotate(-180deg); 
}

/*==================== QUALIFICATION ====================*/
.q_tabs{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: var(--mb-2);
}
.q_btn{
    font-size: var(--h3-font-size);
    font-weight: var(--font-medium);
    cursor: pointer;
}
.q_btn:hover{
    color: var(--first-color);
}

.q_icon{
    font-size: 1.8rem;
    margin-left: var(--mb-0-25);
}

.q_data{
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    column-gap: 1.5rem;
}

.q_title{
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
}

.q_subtitle{
    display: inline-block;
    font-size: var(--small-font-size);
    margin-bottom: var(--mb-1);
}

.q_cale{
    font-size: var(--smaller-font-size);
    color: var(--text-color-light);
}

.q_round{
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: var(--first-color);
    border-radius: 50%;
}

.q_line{
    display: block;
    width: 1.9px;
    height: 100%;
    background-color: var(--first-color);
    transform: translate(6px, -7px);
}

.q_content[data-content]{
    display: none;
}

.q_active[data-content]{
    display: block;
}

.q_btn.q_active{
    color: var(--first-color);
}

这是我的js代码 const tabs = document.querySelectorAll('[data-target]'), tabc = document.querySelectorAll('[数据内容]');

  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(tab =>{
            tab.classList.remove('q_active');
        });
        target.classList.add('q_active');
        
      });
  });

Answer 1

data-target 和 id 需要完全一致。您使用了 id="Education" 但 data-target ='#education'。希望这能解决您的问题。

无法在分区之间切换

Unable to toggle between division

html

javascript

css

portfolio

toggle