Добавление класса active и всплытие div

Question

Не могу никак разобраться, с добавлением активного класса, спасибо заранее)

const headerList = document.querySelector("special__li");

headerList.addEventListener("click", () => {
  let ourHeader = document.querySelectorAll("about__header");
  ourHeader.classList.add("._active")
});

.about__header {
  padding: 45px 28px;
  position: absolute;
  z-index: 0;
  right: 0;
  top: 0;
  background-color: #fff;
  height: 1000px;
}

.about__header .active {
  z-index: 10;
}

<nav class="header__nav">
  <ul class="header__ul">
    *
    <li class="header__li"><a class="header__li special__li"> About</a></li>*
    <li class="header__li"><a href="#" class="header__li"> Dribbble</a></li>
    <li class="header__li"><a href="#" class="header__li">Instagram</a></li>
    <li class="header__li"><a href="#" class="header__li">Twitter</a></li>
  </ul>
</nav>
<!-- Всплывающий блок -->

<div class="about__header _active">
  <div class="about__header-container">
    <div class="about__header-title">About</div>
    <div class="about__header-img">
      <img src="img/designer.jpg" alt="1">
    </div>
    <p class="about__header-text">Mike is a UK based designer, specialising in Branding, Graphic/Web Design, Illustration; Photography. He has a worldwide client roster and his work is often featured in design related publications. Mike is also a regular speaker at design/tech conferences.</p>
    <div class="about__header-mail-line">
      <h4 class="about__header-undemail">Get in touch:</h4>
      <a href="mailto:[email protected]" class="about__header-mail">[email protected]</a>
    </div>
  </div>
</div>

Привер https://www.mikekus.com/about

Answer 1

У вас ошибка в вызове document.querySelector - туда нужно передавать не имя класса, а селектор. Так же вы ошиблись в ourHeader.classList.add("._active"). "._active" - это селектор. А класс будет просто "_active".

const headerList = document.querySelector(".special__li");

headerList.addEventListener("click", () => {
  let ourHeader = document.querySelectorAll(".about__header");
  ourHeader.classList.add("_active")
});

.about__header {
  padding: 45px 28px;
  position: absolute;
  z-index: 0;
  right: 0;
  top: 0;
  background-color: #fff;
  height: 1000px;
}

.about__header .active {
  z-index: 10;
}

<nav class="header__nav">
  <ul class="header__ul">
    *
    <li class="header__li"><a class="header__li special__li"> About</a></li>*
    <li class="header__li"><a href="#" class="header__li"> Dribbble</a></li>
    <li class="header__li"><a href="#" class="header__li">Instagram</a></li>
    <li class="header__li"><a href="#" class="header__li">Twitter</a></li>
  </ul>
</nav>
<!-- Всплывающий блок -->

<div class="about__header _active">
  <div class="about__header-container">
    <div class="about__header-title">About</div>
    <div class="about__header-img">
      <img src="img/designer.jpg" alt="1">
    </div>
    <p class="about__header-text">Mike is a UK based designer, specialising in Branding, Graphic/Web Design, Illustration; Photography. He has a worldwide client roster and his work is often featured in design related publications. Mike is also a regular speaker at design/tech conferences.</p>
    <div class="about__header-mail-line">
      <h4 class="about__header-undemail">Get in touch:</h4>
      <a href="mailto:[email protected]" class="about__header-mail">[email protected]</a>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Добавление класса active и всплытие div

Ответы (1 шт):