我如何更改 html 或 javascript 代码，所以当我单击 div 时它甚至不起作用。我该如何修复它？

Question

所以，我想在我的页面中为菜单栏编写 js 代码，但它不起作用首先，我认为我在div类中犯了一些错误，比如div的地方。其次，也许我在 JS 代码语法上犯了错误，但我查看了控制台，调试部分没有问题。此外，在 JS 部分我可以访问我用 js 代码

编写的所有类

let section2Menubar = document.querySelectorAll('section-2-menubar');
    for(let i=0;i<section2Menubar.length;i++){
        section2Menubar[i].addEventListener('click', () => {
            for(let j=0;j<section2Menubar.length;j++){
                section2Menubar[j].children[0].classList.remove('menubar-options-active');
                section2Menubar[j].children[1].classList.remove('menubar-triangles-active');
            }
            section2Menubar[i].children[0].classList.add('menubar-options-active');
            section2Menubar[i].children[1].classList.add('menubar-triangles-active');
        })
    }

 #section-2-main-menubar-articles{
    margin: 48px 120px;
    display: flex;
    
}


.menubar-options {
    display: block;
    border: 1px solid #EBEBEB;
    padding: 20px 60px;
    margin-bottom: -3px;
    text-align: center;
    color: #717171;
}

.menubar-triangles {
    display: none;
}
.menubar-triangles-active {
    display: block;
    margin-left: 113px;
}

.menubar-options-active {
    background-color: #18CFAB;
    color: #ffffff;
}

<div id="section-2-main-menubar-articles">
                    

                    <div class="section-2-menubar">
                        <div class="menubar-options-active menubar-options">Web Design</div>
                        <img class="menubar-triangles-active menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png">
                    </div>

                    <div class="section-2-menubar">
                        <div class="menubar-options">Graphic Design</div>
                        <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png">
                    </div>

                    <div class="section-2-menubar">
                        <div class="menubar-options">Online Support</div>
                        <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png">
                    </div>

                    <div class="section-2-menubar">
                        <div class="menubar-options">App Design</div>
                        <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png">
                    </div>

                    <div class="section-2-menubar">
                        <div class="menubar-options">Online Marketing</div>
                        <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png">
                    </div>

                    <div class="section-2-menubar">
                        <div class="menubar-options" class="menubar-triangles">Seo Service</div>
                        <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png">
                    </div>
                    
                </div>

            </div>

Answer 1

document.querySelectorAll 方法参数的

section-2-menubar 存在 section-2-menubar 元素。这里，section-2-menubar是class。因此，您需要将 section-2-menubar 更改为 .section-2-menubar.

let section2Menubar = document.querySelectorAll('.section-2-menubar'); // change
for (let i = 0; i < section2Menubar.length; i++) {
  section2Menubar[i].addEventListener('click', () => {
    for (let j = 0; j < section2Menubar.length; j++) {
      section2Menubar[j].children[0].classList.remove('menubar-options-active');
      section2Menubar[j].children[1].classList.remove('menubar-triangles-active');
    }
    section2Menubar[i].children[0].classList.add('menubar-options-active');
    section2Menubar[i].children[1].classList.add('menubar-triangles-active');
  })
}

let section2Menubar = document.querySelectorAll('.section-2-menubar');
for (let i = 0; i < section2Menubar.length; i++) {
  section2Menubar[i].addEventListener('click', () => {
    for (let j = 0; j < section2Menubar.length; j++) {
      section2Menubar[j].children[0].classList.remove('menubar-options-active');
      section2Menubar[j].children[1].classList.remove('menubar-triangles-active');
    }
    section2Menubar[i].children[0].classList.add('menubar-options-active');
    section2Menubar[i].children[1].classList.add('menubar-triangles-active');
  })
}

#section-2-main-menubar-articles {
  margin: 48px 120px;
  display: flex;
}

.menubar-options {
  display: block;
  border: 1px solid #EBEBEB;
  padding: 20px 60px;
  margin-bottom: -3px;
  text-align: center;
  color: #717171;
}

.menubar-triangles {
  display: none;
}

.menubar-triangles-active {
  display: block;
  margin-left: 113px;
}

.menubar-options-active {
  background-color: #18CFAB;
  color: #ffffff;
}

<div id="section-2-main-menubar-articles">


  <div class="section-2-menubar">
    <div class="menubar-options-active menubar-options">Web Design</div>
    <img class="menubar-triangles-active menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png">
  </div>

  <div class="section-2-menubar">
    <div class="menubar-options">Graphic Design</div>
    <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png">
  </div>

  <div class="section-2-menubar">
    <div class="menubar-options">Online Support</div>
    <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png">
  </div>

  <div class="section-2-menubar">
    <div class="menubar-options">App Design</div>
    <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png">
  </div>

  <div class="section-2-menubar">
    <div class="menubar-options">Online Marketing</div>
    <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png">
  </div>

  <div class="section-2-menubar">
    <div class="menubar-options" class="menubar-triangles">Seo Service</div>
    <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png">
  </div>

</div>

</div>

我如何更改 html 或 javascript 代码，所以当我单击 div 时它甚至不起作用。我该如何修复它？

How can i change html or javascript code, so when i click divs even it doesnt work .How can I fix it?

html

javascript

css

animation

menubar