如何更改 html 或 javascript 代码，所以当我单击 div 时，即使它不起作用。我该如何解决？

Posted 2023-02-16

【中文标题】如何更改 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?

【发布时间】：2020-03-06 17:47:38

【问题描述】：

所以，我想在我的页面中为菜单栏编写 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 [e-mail]">
                    </div>

                    <div class="section-2-menubar">
                        <div class="menubar-options">Graphic Design</div>
                        <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle [e-mail]">
                    </div>

                    <div class="section-2-menubar">
                        <div class="menubar-options">Online Support</div>
                        <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle [e-mail]">
                    </div>

                    <div class="section-2-menubar">
                        <div class="menubar-options">App Design</div>
                        <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle [e-mail]">
                    </div>

                    <div class="section-2-menubar">
                        <div class="menubar-options">Online Marketing</div>
                        <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle [e-mail]">
                    </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 [e-mail]">
                    </div>
                    
                </div>

            </div>

【参考方案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 [e-mail]">
  </div>

  <div class="section-2-menubar">
    <div class="menubar-options">Graphic Design</div>
    <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle [e-mail]">
  </div>

  <div class="section-2-menubar">
    <div class="menubar-options">Online Support</div>
    <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle [e-mail]">
  </div>

  <div class="section-2-menubar">
    <div class="menubar-options">App Design</div>
    <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle [e-mail]">
  </div>

  <div class="section-2-menubar">
    <div class="menubar-options">Online Marketing</div>
    <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle [e-mail]">
  </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 [e-mail]">
  </div>

</div>

</div>

【讨论】：

@FerhadMehdizade 如果问题解决了，我很高兴你回答accept。