Как я могу изменить код html или javascript, поэтому, когда я нажимаю div, он даже не работает. Как я могу это исправить? - PullRequest
Новая
       81

Как я могу изменить код html или javascript, поэтому, когда я нажимаю div, он даже не работает. Как я могу это исправить?

1 голос
/ 06 марта 2020

Итак, я хочу написать js код для menubar на своей странице, и он не работает. Во-первых, я думаю, что я делаю некоторые ошибки в классах div, например в местах div. Во-вторых, возможно я делаю ошибку в JS синтаксисе кода, но я смотрю на консоль, и в отладочной части проблем нет. Кроме того, в JS части я могу получить доступ ко всем классам, которые я пишу в js code 

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>

1 Ответ

1 голос
/ 06 марта 2020

section-2-menubar из document.querySelectorAll аргументов метода присутствует section-2-menubar element . Здесь section-2-menubar это класс . Поэтому вам нужно изменить 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>
...